The 2D context provides objects, methods, and properties to draw and manipulate graphics on the drawing surface of a canvas. Refer to the link http://www.w3schools.com/html/html5_canvas.asp to learn more about canvas 2D. The following is some example code for the canvas element:
<html>
<canvas id="canvasElement"></canvas>
</html>
<script>
this.canvas = document.getElementById("canvasElement");
this.ctx = this.canvas.getContext('2d');
</script>The canvas element has no drawing properties in itself and we use a script to draw graphics. The getContext method returns the object, which provides methods to draw text, lines, shapes, and graphics on the canvas.
The following code walks you through the methods of the 2D context object returned from the getContext method:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,10,10);The fillstyle property will...