Hello Readers,
 
To learn canvas you have basic understanding of HTML and JavaScript.

The HTML5 <canvas> tag gives you way to draw graphics via scripting (JavaScript). You can use it for photo compositions, graph and animation. All core HTML5 attributes like id, name and class etc works with canvas.

Default <canvas> is blank so, to display anything script is the first requirement to rendering context and draw. An object is returned by getContext() method which provides methods and properties for drawing on the canvas. You can draw anything like text, boxes, circles, lines etc.

Browser Support -

• Chrome 4.0+
• IE 9.0+
• Firefox 2.0+
• Safari3.1+
• Opera9.0+

It support all css3 property

Note :- canvas was originally introduced by Apple for the OS X Dashboard and Safari (- MDN)

Example for canvas -

HTML-

<canvas id="myCanvas"></canvas>

Script-
 

var canvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);