HTML 5 Canvas Object

The canvas element is part of HTML5 and allows for dynamic scriptable rendering of bitmap images.


<canvas> tag

	<canvas id="myCanvas" width="150px" height="150px"></canvas>

Rendering context

<canvas> creates a fixed sized drawing surface with a rendering context. The current available rendering context is "2D". In the following, note that the <script> element follows the declaration of the <canvas> object. [On the other hand, you could engineer a function call with the <body> onload attribute.]


	<canvas id="myCanvas" width="150px" height="150px"></canvas>
	...
	<script type="text/javascript">
	   var myCanvas = document.getElementById("myCanvas");
	   var myContext = myCanvas.getContext("2d");
	</script>

Drawing coordinates/shapes

The upper left corner is X = 0, Y = 0. All elements are placed relative to this origin.


Rectangles and colors

	
<canvas id="rectCanvas" width="150px" height="150px"></canvas>
	
<script type="text/javascript">
	  var myrectCanvas = document.getElementById("rectCanvas");
	  var myRectContext = myrectCanvas.getContext("2d");
	  myRectContext.fillRect(10, 10, 25, 25);
	  myRectContext.fillStyle = "cyan";
	  myRectContext.fillRect(50, 50, 25, 25);
	  myRectContext.strokeStyle = "red";
	  myRectContext.strokeRect(100, 50, 25, 25);
	  myRectContext.fillStyle = "blue";
	  myRectContext.fillRect(100, 0, 50, 50);
	  myRectContext.clearRect(120, 20, 20, 20);
</script>

Drawing paths

<canvas id="pathCanvas" width="150px" height="150px"></canvas>
	
<script type="text/javascript">
    var myPathCanvas = document.getElementById("pathCanvas");
    var myPathContext = myPathCanvas.getContext("2d");

    // Default style path
    myPathContext.beginPath();
    myPathContext.moveTo(20, 20);
    myPathContext.lineTo(20, 50);	  
    myPathContext.stroke();
    myPathContext.closePath();
	  
    // set path style
    myPathContext.strokeStyle = "red";
    myPathContext.lineWidth = 5;
    myPathContext.lineCap = 'round';
	  
    myPathContext.beginPath();
    myPathContext.moveTo(40, 10);
    myPathContext.lineTo(60, 100);	  
    myPathContext.stroke();
    myPathContext.closePath();
</script>

Drawing Arcs

The first three parameters, x and y and radius, describe a circle, the arc drawn will be part of that circle. startAngle and endAngle are where along the circle to start and stop drawing. 0 is east, Math.PI/2 is south, Math.PI is west, and Math.PI*3/2 is north. If anticlockwise is 1 then the direction of the arc, along with the Angles for north and south, are reversed.

<canvas id="arcCanvas" width="150px" height="150px"></canvas>
	
<script type="text/javascript">
   var myArcCanvas = document.getElementById("arcCanvas");
   var myArcContext = myArcCanvas.getContext("2d");
	
   myArcContext.lineWidth = 5;
  
   myArcContext.beginPath();  
   myArcContext.strokeStyle = "green";
   myArcContext.arc(20, 20, 15, 10, 0, true);
   myArcContext.stroke();

  
   myArcContext.beginPath();
   myArcContext.strokeStyle = "red";
   myArcContext.arc(60, 20, 15, 10, 0, true);
   myArcContext.stroke();
   
   myArcContext.beginPath();
   myArcContext.strokeStyle = "blue";
   myArcContext.arc(100, 120, 45, 10, 0, true);
   myArcContext.stroke();
   
 </script>

Drawing curves

<script type="text/javascript">
var myCurveCanvas = document.getElementById("curveCanvas");
var myCurveContext = myCurveCanvas.getContext("2d");

myCurveContext.lineWidth = 5;
     
myCurveContext.beginPath();
myCurveContext.strokeStyle = "red";
myCurveContext.moveTo(75, 25);
myCurveContext.quadraticCurveTo(25,25,25,62.5);
myCurveContext.quadraticCurveTo(25,100,50,100);
myCurveContext.quadraticCurveTo(50,120,30,125);
myCurveContext.quadraticCurveTo(60,120,65,100);
myCurveContext.quadraticCurveTo(125,100,125,62.5);
myCurveContext.quadraticCurveTo(125,25,75,25);
myCurveContext.stroke();
   
myCurveContext.beginPath();
myCurveContext.strokeStyle = "blue";
myCurveContext.bezierCurveTo(100, 20, 30, 120, 10, 10);
myCurveContext.bezierCurveTo(100, 20, 200, 50, 10, 90);
myCurveContext.stroke();
</script>

Using images

The graph paper image


<canvas id="imageCanvas" width="200px" height="200px"></canvas>
	
<script type="text/javascript">
var myImageCanvas = document.getElementById("imageCanvas");
var myImageContext = myImageCanvas.getContext("2d");

var img = new Image();
img.src = "graphPaper.jpg";
myImageContext.drawImage(img, 0, 0);

myImageContext.beginPath();
myImageContext.moveTo(0, 185);
myImageContext.lineTo(20, 100);
myImageContext.stroke();
myImageContext.beginPath();
myImageContext.moveTo(20, 100);
myImageContext.lineTo(40, 140);
myImageContext.stroke();
myImageContext.beginPath();
myImageContext.moveTo(40, 140);
myImageContext.lineTo(60, 10);
myImageContext.stroke();
myImageContext.beginPath();
myImageContext.moveTo(60, 10);
myImageContext.lineTo(100, 10);
myImageContext.stroke();
myImageContext.beginPath();
myImageContext.moveTo(100, 10);
myImageContext.lineTo(120, 190);
myImageContext.stroke();
</script>