var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
var r = document.getElementById('r');
window.onload=function(){
canvas.width=800;
canvas.height=800;
image.src="demo.jpg";
image.onload=function(){
draw_Image(r.value);
r.onmousemove=function(){
r_val=r.value;
draw_Image(r_val);
}
}
}
function draw_Image(i){
var i_width = canvas.width * i;
var i_height = canvas.height * i;
var x = canvas.width / 2 - i_width / 2;
var y = canvas.height / 2 - i_height / 2;
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,x,y,i_width,i_height);