Drawing A Rotated Path2D Object on canvas

I have a canvas where i want to draw a rotated svg.

In order to achieve this, i created a Path2D object and used the context.fill() option to draw the svg.

Moreover, I used context.translate(x , y) inorder to position the svg.

Now, the issue i how to rotate this?

I found some solutions where it stated that first use context.translate(x , y) to set the transformation point and then use context.rotate(deg) to rotate.

Now, both the translate are in conflict.

Here is the code that I have tried so far. This code rotates the svg element. But from its top right corner. I want it to be rotated from center:

Codepen link – https://codepen.io/asiancat54x/pen/jOwyeaR

Here is the code snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas></canvas>

    <script>
        const canvas = document.querySelector("canvas")

        const ctx = canvas.getContext("2d")

        const path = new Path2D()

        path.addPath(new Path2D('M 25.214844 0.0664062 C 23.191406 0.332031 20.324219 1.554688 17.460938 3.378906 C 15.777344 4.441406 14.132812 5.679688 12.535156 7.082031 C 11.585938 7.917969 11.566406 7.929688 11.273438 7.929688 C 11.140625 7.929688 10.589844 7.824219 10.046875 7.691406 C 9.230469 7.492188 8.996094 7.457031 8.628906 7.472656 C 7.753906 7.519531 7.9375 7.367188 3.777344 11.53125 C 1.277344 14.035156 0.0546875 15.300781 0.0273438 15.402344 C -0.0351562 15.664062 0.0429688 15.851562 0.253906 15.941406 C 0.351562 15.988281 1.636719 16.222656 3.089844 16.445312 C 6.042969 16.90625 6.269531 16.917969 6.859375 16.648438 C 7.042969 16.5625 7.28125 16.429688 7.378906 16.355469 C 7.484375 16.273438 7.632812 16.207031 7.707031 16.207031 C 7.808594 16.207031 8.582031 16.949219 10.773438 19.140625 C 12.378906 20.75 13.703125 22.113281 13.703125 22.164062 C 13.703125 22.21875 13.636719 22.335938 13.5625 22.429688 C 13.34375 22.683594 13.132812 23.152344 13.054688 23.542969 C 12.984375 23.886719 12.996094 24.015625 13.402344 26.621094 C 13.636719 28.113281 13.851562 29.421875 13.878906 29.535156 C 13.945312 29.761719 14.082031 29.851562 14.355469 29.851562 C 14.527344 29.851562 14.851562 29.539062 18.292969 26.097656 C 21.648438 22.761719 22.066406 22.324219 22.210938 22.007812 C 22.496094 21.398438 22.492188 21.167969 22.183594 19.863281 C 22.027344 19.191406 21.925781 18.660156 21.949219 18.589844 C 21.972656 18.519531 22.285156 18.136719 22.644531 17.726562 C 26.28125 13.621094 28.867188 9.066406 29.644531 5.394531 C 29.792969 4.734375 29.808594 4.5 29.8125 3.613281 C 29.8125 2.660156 29.808594 2.5625 29.660156 2.117188 C 29.285156 1.003906 28.535156 0.320312 27.402344 0.0820312 C 26.996094 -0.0078125 25.792969 -0.0195312 25.214844 0.0664062 Z M 23.464844 4.5625 C 25.449219 5.203125 26.210938 7.632812 24.957031 9.285156 C 24.0625 10.472656 22.503906 10.855469 21.179688 10.199219 C 20.101562 9.675781 19.472656 8.65625 19.472656 7.460938 C 19.472656 6.601562 19.753906 5.910156 20.371094 5.304688 C 21.183594 4.488281 22.367188 4.203125 23.464844 4.5625 Z M 23.464844 4.5625'))

        path.addPath(new Path2D("M 6.871094 18.929688 C 5.667969 20.199219 4.289062 22.570312 3.445312 24.839844 C 3.039062 25.953125 2.84375 27.003906 3.027344 27.183594 C 3.113281 27.273438 3.285156 27.210938 4.402344 26.683594 C 4.914062 26.441406 5.910156 26.019531 6.613281 25.746094 C 8.675781 24.933594 9.160156 24.6875 9.96875 24.0625 C 10.480469 23.65625 11.269531 22.910156 11.328125 22.777344 C 11.351562 22.714844 11.335938 22.589844 11.28125 22.480469 C 11.226562 22.378906 10.375 21.472656 9.371094 20.476562 C 7.671875 18.792969 7.527344 18.65625 7.339844 18.65625 C 7.175781 18.65625 7.089844 18.707031 6.871094 18.929688 Z M 6.871094 18.929688 "))

        var rotation = 0

        canvas.width = innerWidth

        canvas.height = innerHeight

        const animate = () => {
            requestAnimationFrame(animate)

            ctx.fillStyle = "rgba(0 , 0 , 0 , 0.1)"

            ctx.fillRect(0 , 0 , canvas.width , canvas.height)

            ctx.fillStyle = "white"

            ctx.translate(70 , 70)

            ctx.rotate(rotation)

            rotation += 0.1

            ctx.fill(path)

            ctx.resetTransform()
        }

        animate()


    </script>
</body>
</html>

Answer

I’d read about how transformations work in computer graphic (transformation matrices).

Here’s an article explaining it thoroughly: https://learnopengl.com/Getting-started/Transformations

Your issue as you stated is where the svg is rotated from – the transformation origin is not the center of the svg.

To change the transformation origin you can apply a translation after the rotation (Read to article to understand why).

ctx.rotate(rotation)
ctx.translate(-15 , -15)

I played around with it and this hit the spot although I’d recommend finding the actual thing that causes the origin to shift in the first place. (avoid using magic numbers – especially when applying transformations).

Advertisement

Answer