During my holiday I start to read about the HTML5 canvas object which can be used for a variety of graphical presentations or animations. Honestly, I was quite surprised about the possibilities of the canvas element. At first I am going to give a short description about the canvas object. Which is followed by a simple canvas example and a small part about how to draw a circle. In the end a conclusion is given.
The Canvas Object
<canvas width='600' height='300'> Canvas not supported </canvas>
var canvas = document.getElementByID(‘canvas’); var context = canvas.getContext(‘2d’);
The context variable is the key to perform graphics with the canvas element. Let us take a look on the attributes of the context.
- Refers to the canvas. You can change the height and width with it
- A color, gradiant, or pattern uses to fill shapes
- Font to use
- Global Alpha setting is number between 0 and 1.0
- How the browser draw one thing over another
- How the browser draws endpoints of a line
- The width of a line
- How lines are joined when their endpoints meet
- How to draw a miter line join
- How the browser spreads out shadow
- The color used to draw shadows
- the horizontal offset for shadows
- The vertical offset for shadows
- the style used to stroke paths
- The horizontal placement of text
- The vertical placement of text
Okay let’s start with creating a simple canvas object.
A Simple Canvas
<DOCTYPE html> <html> <head> <title>Canvas Simple Example</title> </head> <body> <canvas id='canvas' width='600' height='300'> Canvas is not supported </canvas> <script src=’example.js’></script> </body> </html>
Pretty easy or? And that is how you create a canvas element and give it an id, width, and height. Let us take a look into the example.js file.
var canvas = document.getElementById(‘canvas’); var context = canvas.getContext(‘2d’); context.fillStyle = “blue”; context.font = “bold 16px Arial”; context.fillText(“Hello World”, 100, 100);
Shapes can be fun and could be used for different kinds of applications and with the canvas element you can create all kind of shapes. Let us create a shape of a circle to show it. At first we need as in the previous example an html page with a canvas element.
<DOCTYPE html> <html> <head> <title>Canvas Animation</title> </head> <body> <canvas id=”canvas” width=”500” height=”500”> Canvas not supported </canvas> </body> </html>
var canvas = document.getElementById(‘canvas’); var context = canvas.getContext(‘2d’); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = ‘green’; context.fill(); context.lineWidth = 5; context.strokeStyle = ‘#003300’ context.stroke();
In the first two rows we obtain the canvas and context again. Furthermore we calculate the centerX coordinate and the centerY coordinate. The last variable is the radius of the circle. After the initialization of the variables we call the method beginPath() which tells the canvas element that we want to draw something. The next method call arc expects six parameter whereby the last parameter is optional. The function fill() as the name already let suggest fills the circle with the color green. The function stroke()
Our canvas contains a circle now.
The canvas element is a nice feature if you like to create nice interactive user interfaces. It has a good API which provides a lot of handy features. If I got you inspired I can recommend a book called Core HTML canvas from David Geary which explains the canvas element complete and shows a lot of use cases you how to use it.