The following tutorial will discuss the HTML5 canvas element and its API. Since it is a long tutorial, it will be split into several mini tutorials.
This tutorial introduces the canvas element, its comparison to SVG, its accessibility, the support for canvas in browsers and how to start to use the canvas element.
Static images in a browser are supported since a long time using
Current solutions for dynamic graphics in a browser are:
HTML5 comes with the
There is one main alternative to canvas that you often hear about: SVG (Scalable Vector Graphics).
Both canvas and SVG allow graphic manipulation in the browser but it is two different techniques.
Depending on the kind of graphics application you want to do, you want to consider the following characteristics.
canvas:
SVG:
So far the canvas element is supported in Firefox 3.5+, Safari 4.0+, Chrome 6.0+ and Opera 10.5+.
Two important things to know:
Regarding accessibility, there are a lot of things we can do in a canvas: We can draw text strings and images for instance but what if the canvas element is not supported in the end user's browser? Is there a way to display the same text as the one inserted in the canvas? Is there a way to display an alternative text for inserted images in a canvas when this one is not supported?
There is currently no way to provide alternative text for images used in a canvas. Another thing is that a text in a canvas is just a collection of pixels there is no way to copy paste it or access it in the DOM.
Fallback in a canvas works like this:
Canvas is currently lacking of accessibility, that is something that just need more work for now.
To use the canvas element in a web page, we would do the following:
This is all you have to do in HTML to use a canvas. Now, if you want to access your canvas and draw on it, you have to use JavaScript.
All drawing operations on a canvas happen in in the canvas's context: its 2D context.
Use JavaScript to get the canvas's context:
Now that we obtained the context we will be able to perform drawing methods on it.
Before getting into drawing operations and transformations, let us see how coordinates works on a canvas:
coordinates on a canvas are expressed in pixels
A canvas support only one basic shape: Rectangle
We are going to see how to draw more things than rectangles using paths later.
Filled rectangle:
Since we only perform operations on the canvas context, we need to get it using
Stroked rectangle:
In the next canvas tutorial series, we are going to see how to draw more than a simple rectangle using paths.
This tutorial introduces the canvas element, its comparison to SVG, its accessibility, the support for canvas in browsers and how to start to use the canvas element.
Static images in a browser are supported since a long time using
<img> but what about dynamic graphics? Well, there is no native support for that.Current solutions for dynamic graphics in a browser are:
- Using plugins such as Flash, Silverlight, JavaFX, etc...
- VML (Vector Markup Language) only works in IE
HTML5 comes with the
<canvas> element which provides a JavaScript API for 2D drawing (from basics shapes to complex paths) in the browser. The canvas element is part of the HTML5 specification but the canvas 2D API itself has its own specification.There is one main alternative to canvas that you often hear about: SVG (Scalable Vector Graphics).
Both canvas and SVG allow graphic manipulation in the browser but it is two different techniques.
Depending on the kind of graphics application you want to do, you want to consider the following characteristics.
canvas:
- Advantages
- High performance graphics
- Pixel-level manipulation
- Constant performance depending on the resolution used
- Canvas drawing surface can be saved as an image file - Drawbacks
- No API for animation, You have to redraw everytime
- Pixel-manipulation: impossible for shape you create to respond to events
- Not scalable
- Not suited for user interfaces
SVG:
- Advantages
- Vector-based, scalable to any resolution
- Good support for animations
- DOM manipulated elements - Drawbacks
- Works with the DOM so with a lot of elements it gets slower
- Not suited for gaming applications
So far the canvas element is supported in Firefox 3.5+, Safari 4.0+, Chrome 6.0+ and Opera 10.5+.
Two important things to know:
- Canvas is also supported in Firefox 3.0 except for drawing text.
- Canvas can be supported in Internet Explorer using a third-party JavaScript library called
explorercanvas. You can then use<!--[if IE]>...<![endif]-->to load the library when needed.
Regarding accessibility, there are a lot of things we can do in a canvas: We can draw text strings and images for instance but what if the canvas element is not supported in the end user's browser? Is there a way to display the same text as the one inserted in the canvas? Is there a way to display an alternative text for inserted images in a canvas when this one is not supported?
There is currently no way to provide alternative text for images used in a canvas. Another thing is that a text in a canvas is just a collection of pixels there is no way to copy paste it or access it in the DOM.
Fallback in a canvas works like this:
Code:
<canvas>
<!-- This is where your fallback solution would take place -->
</canvas>
Canvas is currently lacking of accessibility, that is something that just need more work for now.
To use the canvas element in a web page, we would do the following:
Code:
<canvas width="533px" height="300px" id="mycanvas"></canvas>
This is all you have to do in HTML to use a canvas. Now, if you want to access your canvas and draw on it, you have to use JavaScript.
All drawing operations on a canvas happen in in the canvas's context: its 2D context.
Use JavaScript to get the canvas's context:
Code:
var ctx = document.getElementById("mycanvas").getContext("2d");
Now that we obtained the context we will be able to perform drawing methods on it.
Before getting into drawing operations and transformations, let us see how coordinates works on a canvas:
coordinates on a canvas are expressed in pixels
A canvas support only one basic shape: Rectangle
We are going to see how to draw more things than rectangles using paths later.
Filled rectangle:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>HTML5 Example: Canvas</title>
<script>
//Work on a canvas
function drawOnCanvas() {
var ctx=document.getElementById("mycanvas").getContext('2d');
ctx.fillRect(50,50,100,200);
}
window.addEventListener('load', drawOnCanvas, true);
</script>
</head>
<body>
<canvas width="533px" height="300px" id="mycanvas"></canvas>
</body>
</html>
Since we only perform operations on the canvas context, we need to get it using
document.getElementById("mycanvas").getContext('2d'); supposing we have a canvas with an id "mycanvas"fillRect draws a filled rectangle of 100px width and 200px height with the top-left corner located at (50,50). Default color of the rectangle is black.Stroked rectangle:
Code:
var ctx=document.getElementById("mycanvas").getContext('2d');
ctx.strokeRect(50,50,100,200);
strokeRect draws a stroked rectangle of 100px width and 200px height with the top-left corner located at (50,50). Default color of the rectangle is black.In the next canvas tutorial series, we are going to see how to draw more than a simple rectangle using paths.