var canvas = document.getElementById('canvas');

var context = canvas.getCotext('2d');

var slider = document.getElementById('scale-range');

var image = new Image();

window.onload = function(){

canvas.width = 1920;

canvas.height = 1080;

var scale = slider.value;

image.src = "banner.jpg";

image.onload = function(){

drawImageByScale(scale);

slider.onmousemove = function(){

scale = slider.value;

drawImageByScale(scale);

}

}

}

function drawImageByScale(scale){

var imageWidth = 1920 * scale;

var imageHeight = 1080 * scale;

var dx = canvas.width/2 - imageWidth/2;

var dy = canvas.height/2 - imageHeight/2;

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(image,dx,dy,imageWidth,imageHeight);

}