The canvas element in HTML5 can be used to render any graphical content. Shapes, paths, text and even images can be drawn on canvas. Canvas doesn’t support animations, but animations can be created by writing some additional JavaScript code.
Using the pixel manipulation feature of canvas, we can draw images or change colours of existing images. To manipulate pixels, we have to follow the following steps:
- Create an image data object to draw on the canvas context
- Loop through each pixel in the area to be drawn
- Set RGBA values to current position inside the loop
- Put the image on the canvas context
To draw something specific, we have to logically divide the area to be drawn and manipulate carefully. With this understanding, let’s start drawing a chess board layout.
Create a new HTML page and add a canvas element to the body.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chess board layout using HTML5 Canvas</title>
</head>
<body>
<canvas id="chessLayoutCanvas" width="320" height="320" >
Sorry, your browser doesn't support Canvas!
</canvas>
</body>
</html>
This is the entire HTML needed for this demo. To draw image on it, we have to write some JavaScript code. Following operations have to be performed inside the JavaScript code:
- Obtain JavaScript object of the canvas element
- Get the canvas context
- Follow steps to draw image
Canvas element will be ready to operate once the entire page is loaded. So, above operations have to be performed once the page is loaded. Following script gets the canvas object and object of the 2-dimensional context:
var canvas = document.getElementById('chessLayoutCanvas');
if(!canvas || !canvas.getContext)
return;
var context = canvas.getContext('2d');
if(!context || !context.putImageData)
return;
To draw on the canvas, we have to get an image data object. Canvas context has a function createImageData that returns the object we need, but it is not supported on all browsers. Following snippet shows different ways of obtaining an object using which we can draw some colors on the canvas:
var chessLayoutImage, width, height;
width = canvas.width;
height = canvas.height;
if (context.createImageData) {
chessLayoutImage = context.createImageData(width, height);
}
else if (context.getImageData) {
chessLayoutImage = context.getImageData(0, 0, width, height);
}
else {
chessLayoutImage = { 'width': width, 'height': height, 'data': new Array(width * height * 4) };
}
Now that we have the object using which we can achieve what we have to do, let’s think about the logic to draw a chess board layout.
As we all know, a chess board has alternate arrangement of white and black colors. On observing a bit, we can say that the color of last cell on a row is repeated on first cell of next row. Keeping this point in mind and calculating pixels on which we have to draw, I came up with the following logic:
var pixels = chessLayoutImage.data;
var isBlack=true;
for(pixelPosition = 0; pixelCount = pixels.length, pixelPosition < pixelCount ; pixelPosition+=4){
if(pixelPosition%160==0 && !(pixelPosition%(40*4*320)==0)){
isBlack= !isBlack;
}
if(isBlack){
pixels[pixelPosition]=0;
pixels[pixelPosition+1]=0;
pixels[pixelPosition+2]=0;
pixels[pixelPosition+3]=255;
}
}
context.putImageData(chessLayoutImage,0,0);
context.strokeStyle='black';
context.strokeRect(0,0,320,320);
context.stroke();
If you observer the above code, I am drawing the black color alone. Place to be filled with white is left as by default the background is white.
After drawing the layout, a black border is drawn around the canvas to show the boundaries of the area.
Happy coding!
