'HTML5 Canvas Scale position

Im trying out canvas for the first time and have a few questions about scaling.

After i scale the canvas up (half) i want to set the current position. The scale always sets the canvas to pos 0,0 (top-left).

If anyone knows how i could change the position while scaling please leave a answer!

Example
http://i.stack.imgur.com/SLG4v.png original.
http://i.imgur.com/2nmJZJH.png needed result.

javascripthtmlcanvas


Solution 1:[1]

To get what you have shown in the images.

// ctx is the canvas 2d context
// img is the image
function showImageScaled(img,scale,x,y){
    // scale is how big you want it. 
    // x and y are where in the image you want the top left to be
    ctx.setTransform(scale,0,0,scale,0,0);
    ctx.drawImage(img,-x,-y); // move the image
}

So to view the top corner scaled up to twice

showImageScaled(img,2,0,0);

To show the centre in the top left and the image scaled 4 times

showImageScaled(img,4,img.width/2,img.height/2);

Hope this helps.

Solution 2:[2]

You can use this example:

    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    const canvasArea = canvas.width * 2 + canvas.height * 2;
    const radius = canvasArea * 0.1;
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const color = 'blue';

    function drawCircle(context, scale, centerX, centerY, radius, color){
          context.save()
          context.beginPath();
          context.translate(centerX, centerY);
        context.scale(scale,scale);
          context.translate(-centerX,-centerY);
          context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        context.fillStyle = color;
        context.fill();    
        context.restore()
    }

    function change(el) {
      canvas.width = canvas.width;
      canvas.height = canvas.height;

        const scale = el.value / el.max;

        drawCircle(ctx, scale, centerX, centerY, radius, color);
    }

    change(document.getElementById('rangeInput'));
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>
    <br>
    
    <input id='rangeInput' type="range" min="0" max="100" value="100" oninput='change(this)' onchange='change(this)' style="width:200px">

Solution 3:[3]

An alternative to the solution given by Blindman67

You can use this precision zoom, which scales your picture at custom central scaling point (the same way as how digital camera lcd display zooms) and draws it.

function precisionScale(img,scale,x,y){
        /** Function precisionScale
         * The function scales the image with a custom central scaling point
         * as opposed to 0,0 (top,left) default central scaling point
         */
        ctx.translate(x,y);
        ctx.scale(scale,scale);
        ctx.drawImage(img,-x,-y);
        ctx.scale(-scale,-scale);
        ctx.translate(-x,-y);
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Blindman67
Solution 2 Dharman
Solution 3 Community

Related Questions