Search code examples
javascripthtmlcanvasmove

Is it possible to change the position of a canvas instead of redrawing a picture?

Let's say I want to move both of my image's X coordinate by 2 to the right.

Instead of doing:

drawImage(image1, x1, y1, imageWidth1, imageHeight1);
drawImage(image2, x2, y2, imageWidth2, imageHeight2);

ctx.clearRect(0, 0, c.width, c.height);

drawImage(image1, x1 + 2, y1, imageWidth1, imageHeight1);
drawImage(image2, x2 + 2, y2, imageWidth2, imageHeight2);

Is it possible to do something like this?

drawImage(image1, x1, y1, imageWidth1, imageHeight1);
drawImage(image2, x2, y2, imageWidth2, imageHeight2);
moveCanvas(2, 0); //This moves the canvas entirely +2 to the right
                  //without the need of redrawing

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Title</title>
    </head>
    <body>
        <canvas id = "canvas"
        style="z-index: 1;
        position:absolute;
        left:0px;
        top:0px">
        </canvas>
</body>
</html>
Solution

  • Well... you can move the container where your canvas is placed, and obtain the same result