How to draw a chess board using HTML5 Canvas

Chess Board

In our blog today we will draw a simple chess board using HTML5 Canvas. We will draw simple black and white boxes to create it using canvas API of HTML5.

Canvas features

It is basically used to draw graphics on the webpage.
It acts as a container.
It has only two parameters namely height and width. Both are defined by user,if not set by user it automatically initialized as 300px wide and 150px height.

Lets get started

Step 1

Create you html page and define the title and head

Step 2

Define the canvas attributes

Step 3

Add the following script which draws the chess board using loops.

In the code above we have taken a cell width to be 70 pixels and we are looping it 8 times to draw the content.