Home » HTML5, Javascript

HTML5 Canvas element drawing with examples | draw line, circle

12 October 2011 One Comment
Share on Facebook

HTML5 Canvas element used to render graphics or visual drawing on browser on the fly.
HTML 5 canvas should be used appropriately where it is needed, since it is graphically intensive.

In this article about basics of HTML5 Canvas we are going to deal with.

  • Skeleton HTML5 Canvas
  • Adding HTML5 Canvas Element on HTML
  • Access Canvas element in java script
  • Draw line in HTML5 canvas
  • Draw circle or Arc in HTML5 canvas element

 

Skeleton HTML5 code for accesing <Canvas/> element:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas tutorial</title>
</head>

<body>

<script type="text/javascript">
      function draw(){

        var canvas = document.getElementById('canvasTest');
        if (canvas.getContext){

			var ctx = canvas.getContext('2d');
				ctx.fillStyle="rgb(255,0,0)";
				ctx.fillRect(50, 25, 100, 100);

				ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
				ctx.fillRect (70, 45, 100, 100); 

        }
      }
    </script>

  </head>
  <body onload="draw();">
    <canvas id="canvasTest" width="200" height="200"> Drawing canvas in HTML5 </canvas>
  </body>

</body>
</html>

 

Adding HTML5 Canvas Element on HTML:

To add html5 canvas element just add the <canvas/> tag

<canvas id="canvasTest" width="100" height="100"></canvas>

Canvas element has only two attributes “width” and “height”, both attributes can be set via DOM properties. id attribute is to access the canvas element via script.

The height and width attributes are optional one, if not set the default values for height and width of <Canvas/> element is

Default Canvas Width: 300 pixels
Default Canvas height: 150 pixels

 

HTML5-canvas-square

[ HTML 5 Canvas View Demo ]


Access HTML5 Canvas element in java script:

A canvas element can have a primary context, which is the first context to have been obtained for that element. When created, a canvas element must not have a primary context. Before accessing the Canvas element via script we need to get handle of it. This can be made by

context = canvas.getContext(’2d’);

Returns an object that exposes an API for drawing on the canvas. The first argument specifies the desired API.

Fallback code when HTML5 fails:

Either we can have text in canvas element.

<canvas id="canvasTest" width="200" height="200"> Drawing canvas in HTML5 </canvas>

Or we can use javascript.

 
<script type="text/javascript">
      function draw(){

        var canvas = document.getElementById('canvasTest');
        if (canvas.getContext){

				//Sucess: do what we need to 

        }else
	{
				//Fails: fallback code
	}
      }
</script>

 

Draw line in HTML5 canvas:

Drawing a line in HTML5 canvas involves following commands or built in functions.

  • beginPath()
  • closePath()
  • stroke()
  • fill()

beginPath() method indicates that path is going to start or resets and inserts new path if we are drawing already.

closePath() method ends the open path what we have drawn to closed path by a straight line.

stroke() is used to draw an outlined shape

fill() is used to paint a solid shape.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas line tutorial</title>
</head>
<body>
<script type="text/javascript">
      function draw(){

        var canvas = document.getElementById('canvasTest');
        if (canvas.getContext){

				var cxt =canvas.getContext("2d");

				cxt.beginPath();
				cxt.moveTo(125,125);
				cxt.lineTo(125,45);
				cxt.lineTo(45,125);
				cxt.stroke();

        }
      }
    </script>

  </head>
  <body onload="draw();">
    <canvas id="canvasTest" width="200" height="200"> Draw line on canvas in HTML5 </canvas>
  </body>

</body>
</html>

 

Draw circle or Arc in HTML5 canvas element:

To draw arc or circle in HTML5 we use arc(), let’s see the syntax for arc method in HTML5.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Parameters:

  • x and y are the coordinates of the circle’s center.
  • Radius is self explanatory
  • startAngle and endAngle parameters define the start and end points of the arc in radians.
  • Anticlockwise parameter is a Boolean value which when true draws the arc anticlockwise or clockwise direction.

Note: Angles in the arc function are measured in radians

 

HTML5-canvas-circle

[ HTML5 Circle View Demo ]


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Canvas line tutorial</title>
</head>
<body>
<script type="text/javascript">
      function draw(){

        var canvas = document.getElementById('canvasTest');
        if (canvas.getContext){

				var cxt =canvas.getContext("2d");

					cxt.fillStyle="rgb(255,0,0)";
					cxt.beginPath();
					cxt.arc(100,100,100,0,Math.PI*2,true);
					cxt.closePath();
					cxt.fill();

        }
      }
    </script>

  </head>
  <body onload="draw();">
    <canvas id="canvasTest" width="500" height="300"> Draw line on canvas in HTML5 </canvas>
  </body>

</body>
</html>

In this article we have seen some basics of HTML Canvas usage. In next article we will see how to draw gradient fill in HTML5 canvas. Hope you guys enjoyed this basics

of HTML5 canvas article :)

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • Kdfam

    Tried to validate the code in the first example without success. I made some adjustments which resulted in valid code. Here are the changes. nnn nnnHTML5 Canvas tutorialnnnn function draw(){n n var canvas = document.getElementById(‘canvasTest’);n if (canvas.getContext){n n var ctx = canvas.getContext(’2d’);n ctx.fillStyle=”rgb(255,0,0)”;n ctx.fillRect(50, 25, 100, 100);n n ctx.fillStyle = “rgba(0, 0, 200, 0.5)”;n ctx.fillRect (70, 45, 100, 100); n n }n }n n n n n Drawing canvas in HTML5 n n nn