html tutorial - rotate() Method in HTML5 Canvas - html5 - html code - html form




Rotate method in html5 canvas

Learn html - html tutorial - Rotate method in html5 canvas - html examples - html programs

  • The rotate() is the method of HTML CANVAS
  • The rotate() method is used to rotate the current diagram.

Syntax for rotate() Method in HTML5 Canvas:

context.rotate(angle);

Parameter values for rotate() Method in HTML5 Canvas:

Parameter Description
angle The rotation angle, in radians.

Sample Coding for rotate() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
      <title>wikitechy-rotate() method in canvas</title>
    </head>
    <body>
        <h2>wikitechy-rotate()method in canvas</h2>
        <canvas id="wikitechyCanvas" width="300" height="150" 
        style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var canvas = document.getElementById("wikitechyCanvas");
            var context = canvas.getContext("2d");
            context.rotate(20 * Math.PI / 180);
            context.fillRect(50, 20, 100, 50);
       </script>
    </body>
</html>

Code Explanation for rotate() Method in HTML5 Canvas:

rotate() method in HTML5 canvas Code Explanation

  1. ”wikitechyCanvas” is used to define the id attribute value for canvas element.
  2. The getElementById(); method is used to get the element that has the id attributes value as “wikitechyCanvas”.
  3. canvas.getContext() method returns an object that provides methods and properties for drawing two dimension figure on the canvas
  4. The beginPath() method is used to begins the path for a line.
  5. mak.lineWidth is used to set a line width as 10.
  6. The context.rotate() method is used to rotate a diagram at (20 * Math.PI / 180) radiant.
  7. The context.fillRect() method is used to draw a "filled" rectangle. (50, 20, 100, 50);

Output for rotate() Method in HTML5 Canvas:

rotate() method in HTML5 canvas Output

  1. <canvas> tag is used to draw the rectangle with blue color border.
  2. The output shows that a 20-degree rotated rectangle.

Browser Support for rotate() Method in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Related Searches to rotate() Method in HTML5 Canvas

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×