G’day,
Following up from my previous post in which we talked about new form input types and attributes that you should know, this post is just a brief introduction to new HTML5 element called
canvas is an element to which we can draw shapes, text and do various advanced things through JavaScript API. Canvas is an immediate mode bit mapped area of the screen that can be manipulated through JavaScript API. Immediate mode in my reference above refers to the way the canvas renders pixels on the screen. When you draw anything on canvas it redraws everything on every action we take through JavaScript API calls.
We can draw shapes like arc, line, curves etc. canvas uses a grid system where every pixel on a drawing area is available through x,y coordinates. The grid looks like one shown below for a 200X200 canvas.
So as you can see that how x and y coordinates are mapped.
x value increase from left to right →
y value increase from top to bottom ↓
Before we go ahead I would like to make a point here. If you are not comfortable with JavaScript then maybe a good introductory JavaScript tutorial is something I would recommend.
Please note that most of my examples will work on all browsers but the code is primarily tested on Google Chrome. I recommend to use the latest version of your favourite browser. IE8 or older does not support canvas
Problem: A canvas with text “Hello canvas” with some styling
3 important properties/attributes for canvas are as follows
- id: Used to reference and get hold of through javascript
- width: width of your canvas
- height: height of your canvas
The mark for our example
|
1 2 3 |
<canvas id="mycanvas" width="300" height="300"> Your browser does not support HTML5 Canvas. </canvas> |
As you see that we have created our canvas element. I hope that you remember noscript tag and the way we pass on a message to the user in case script tag was not supported. We can do exact same thing with canvastoo. As you can see from our demo markup that I have left a string “Your browser does not support HTML5 Canvas.” which will be display if canvas is not supported by your browser.
Before we go any further we will add simple style to our canvas
The CSS
|
1 2 3 4 |
canvas { border:1px #e1e1e1 solid; box-shadow: 0px 0px 12px 2px #e1e1e1; } |
|
1 |
The Javascript
While my html5 oriented posts and all other on this blog are usually problem/solution posts so this is no different. So rather than wasting time we jump in straight to action. First we get hold of canvas element as shown below
|
1 |
var mycanvas = document.getElementById("mycanvas"); |
Now we need to make sure that our browser support canvas, so we will add this condition for rest of our code snippet
|
1 2 3 4 |
if(mycanvas && mycanvas.getContext) { // canvas is supported // we will do rest of our stuff here } |
As discussed in one of my previous post that we can use Modernizr framework too to detect canvas support as shown below
|
1 2 3 |
if(Modernizr.canvas) { // canvas is supported } |
Now that we know that canvas is supported we need to get 2D (2 dimensional) context of our drawing board and start pushing commands to it. as shown below
|
1 2 3 4 5 6 7 8 9 10 11 |
if(mycanvas && mycanvas.getContext) { // get the 2d context context = mycanvas.getContext("2d"); // background context.fillStyle = "#e1e1e1"; context.fillRect(0,0,300,300); // hello canvas text draw context.fillStyle = "#C00000"; context.font = "40px arial"; context.fillText("Hello Canvas",50,150); } |
Result
Demo
Demo for above code is located here
http://jaspreetchahal.org/examples/html5/canvas-intro.html
Ok so in this post we touched base on basic usage of canvas we will be looking for more advanced use in several posts to come. We will touch base on important properties of canvas object and functions so stay tuned.
If you find any problem with this article please leave your comment.
I hope that this helps.
Leave a Reply