Resize and re-position image on canvas resize

Question

I have an image to be drawn on a canvas with its coordinate. e.g;

var data = {
 x: 100, y: 100, // the coord when the image drawn
 src: imguri, 
 scale: 1.6 // the scale when the image drawn
}

and zoom function like below;

var scale = 1.6, width = canvas.width, height = canvas.height

function zoom(positiveOrNegative) {
 scale += positiveOrNegative * .2
 canvas.width = width * scale
 canvas.height = height * scale
 loadImage() 
}

function loadImage() {
 var img = new Image()
 img.src = data.src;
 img.onload = function() { context.drawImage(img, data.x, data.y) }
}

https://jsfiddle.net/bbuv53u6/

how do I resize and re-position the image to look like it's been zoomed in/out when the canvas is resized?

score 0 · Answer 1 · answered Aug 31 '17 at 07:27

Use this methods for get a position values .

If you put just

var posX = 10

This variable is fixed but if you dont use variable use method :

 VIEW.W(2)  // this is 2% from window width .

In this case you no need for any calculation on resize. Also your example have no zoom effect, you just resize canvas tag element.

Procedures for zoom :

   //context.save();
   context.translate( x , y );
   context.scale(scale, scale); 
   //context.restore();

Heres object :

var VIEW = {

 W :  function(per){

    if (typeof per === 'undefined'){
        return window.innerWidth;
    }else{
        return window.innerWidth/100 * per;
    }

 },
 H :  function(per){

    if (typeof per === 'undefined'){
        return window.innerHeight;
    }
    else{
        return window.innerHeight/100 * per;
    }

},

ASPECT : function(){

    return window.innerWidth / window.innerHeight;

},

};

Bonus link :

Zooming with canvas

Resize and re-position image on canvas resize

1 Answers1