How To Roate On Drawing Tablet

Summary: in this tutorial, you'll learn how to use the JavaScript rotate() method to rotate drawing objects.

Introduction to JavaScript rotate() sheet API

The rotate() is a method of the 2D drawing context. The rotate() method allows y'all to rotate a drawing object on the canvas.

Here is the syntax of the rotate() method:

ctx .rotate(angle)

Code language: CSS ( css )

The rotate() method accepts a rotation bending in radians.

If the angle is positive, the rotation is clockwise. In instance the bending is negative, the rotation is counterclockwise.

To convert a degree to a radian, you use the following fomular:

caste * Math.PI / 180

Code linguistic communication: JavaScript ( javascript )

When adding a rotation, the rotate() method uses the canvas origin as the rotation eye signal.

The following picture illustrates the rotation:

If you desire to change the rotation eye point, y'all demand to move the origin of the canvas using the translate() method.

JavaScript rotate() example

The following example draws a reddish rectangle starting from the center of the canvas. It then translates the origin of the canvas to the sail' middle and draws the second rectangle with a rotation of 45 degrees:

HTML

                                          <canvas                  id="sail"                  meridian="300"                  width="500">                </sheet>                          
                          Lawmaking language:              HTML, XML              (              xml              )

JavaScript

                                          const                canvas =                document.querySelector('#sheet');                if                (canvas.getContext) {                // rectangle's width and height                const                width =                150,         elevation =                xx;                // canvass heart 10 and Y                const                centerX = sail.width /                two,         centerY = canvas.height /                two;                const                ctx = sheet.getContext('2d');                // a ruddy rectangle                ctx.fillStyle =                'ruddy';     ctx.fillRect(centerX, centerY, width, elevation);                // motility the origin to the sail' center                ctx.translate(centerX, centerY);                // add 45 degrees rotation                ctx.rotate(45                *                Math.PI /                180);                // draw the second rectangle                ctx.fillStyle =                'rgba(0,0,255,0.5)';     ctx.fillRect(0,                0, width, height);  }            
                          Code language:              JavaScript              (              javascript              )