Latest web development tutorials

×

JavaScript Reference

JavaScript

JS String JS Number JS Operators JS Statements JS Math JS Date JS Array JS Boolean JS RegExp JS Global JS Conversion

Browser BOM

Window Navigator Screen History Location

HTML DOM

DOM Document DOM Elements DOM Attributes DOM Events DOM Style

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other Objects

CSSStyleDeclaration

HTML canvas rotate() Method

< Canvas Object

Example

Rotate the rectangle 20 degrees:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
rotate()	4.0	9.0	3.6	4.0	10.1

Definition and Usage

The rotate() method rotates the current drawing.

Note: The rotation will only affect drawings made AFTER the rotation is done.

JavaScript syntax:	context.rotate(angle);

Parameter Values

Parameter	Description	Play it
angle	The rotation angle, in radians. To calculate from degrees to radians: degreesMath.PI/180. Example: to rotate 5 degrees, specify the following: 5Math.PI/180	Play it »

< Canvas Object