CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
Thulitha Gurusinghe
Thulitha Gurusinghe

Reputation: 49

Moving canvas with translate() method

According to MDN documentation translate() method "moves the canvas and its origin" but the below code does not move the border of the canvas. If the translate() method moves the canvas shouldn't the border move as well?

<!DOCTYPE html>

<head>
    <title>Temp</title>
    <style>
        canvas {
            border: 1px solid black;
        }

        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas")
        canvas.width = 300;
        canvas.height = 300;

        const ctx = canvas.getContext("2d");
        ctx.translate(canvas.width / 2, canvas.height / 2);
    </script>
</body>

</html>

Upvotes: 1

Views: 146

Answers (1)

No&#233; Mrct
No&#233; Mrct

Reputation: 26

I don't quite understand what you are trying to do. If you want to offset your canva, why not just do this?

document.getElementById("myCanvas").style.transform = "translate(50%, 50%)";

Upvotes: 1

Related Questions