Did you find this useful?
Socialize it today.


HTML5 Canvas Introduction

Friday, October 19, 2012

browser

The <canvas> element in HTML5 can be used to draw graphics using client-side scripting, typically JavaScript. You can use the canvas element, for instance, to draw graphs, or animations. Using the canvas element is easy, but you do need a basic understanding of HTML and JavaScript.


Support for Canvas

Not all modern browser support the canvas element, but is supported in Firefox 1.5 and later, Opera 9 and later, newer versions of Safari, Chrome, and Internet Explorer 9. Your browser was detected as and this browser does support the canvas element.


Begin with the Canvas

The canvas element represents a rectangular area on an HTML page. When using the canvas element, the first thing you need to do is add the tag to your HTML5 document:

<canvas id="myCanvas" width="300" height="200"></canvas>

With the canvas element, you will always want to specify an id attribute because you will reference it from your javascript code. In addition, specify width and height attributes to define the size of the canvas. You can style the canvas element, and have more than one in your document.

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;" ></canvas>

What do you do if the browser does not support the canvas element? There are a few options. An easy approach is to place alternative content inside the canvas tags. For example:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;" >
  <span>Sorry, the example could not be displayed.  Your browser does not support the canvas element.</span>
</canvas>

Example

Your browser does not support the HTML5 canvas tag.

You can place text, an image element, or whatever HTML content you need to display if the canvas tag is not supported. If the browser supports the canvas tag, the contents inside will be ignored. If the browser does not support the canvas tag, the contents will be displayed. An alternative to this approach is to test the browser for this feature ability using JavaScript. For example, you can create a function that tests for the ability to create a canvas element. Then, based on the results, you can take specific actions. Here is an example regarding how to check for canvas support using JavaScript. In the following example, we use a conditional statement, to test for support.

if (!isCanvasSupported()){ .. not supported so do something ... }
function isCanvasSupported() {
   var elem = document.createElement('canvas');
   return !!(elem.getContext && elem.getContext('2d'));
}

Draw Onto the Canvas

To draw onto the canvas, we will need the assistance of JavaScript.

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FFAA00";
  ctx.fillRect(75, 50, 150, 100);
</script>

Example

Your browser does not support the HTML5 canvas tag.


Canvas Coordinates

The canvas is a two dimensional grid. The upper-left corner of the canvas has a coordinate of (0,0). In the previous example, we use the fillRect property and instructed the browser to start the the X coordinate of 75 and the Y coordinate of 50, then move 150 pixels to the left on X and down 100 pixels on Y, then fill the rectangle with a solid color.

In the upcoming articles in this series, we will cover more advanced techiques used to draw graphics onto the canvas element. You will learn how to draw lines, circles, rectangles, apply styles, shadows, text, and apply transformations.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Definitive Guide to HTML5 Head First HTML5 Programming: Building Web Apps with JavaScript HTML CSS and JavaScript