I had been learning recently about the HTML5 Canvas and its JavasScript API's. It was a lot of fun playing around with it, but the API's were pretty low-level. So I was really happy when I found a great jQuery plugin that supported the canvas tag -
jCanvas !
I thought I'd share what I learned about jCanvas by giving an example of how I learned to use it in drawing out a
Go game board.
Step 1 - Create the Canvas
This file
go.html is just plain-vanilla HTML5 markup to provide the canvas to draw on.
<!doctype html>
<head>
<meta charset="utf-8" />
<script src="jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
<script src="go.js"></script>
<title>HTML5 Go Board</title>
</head>
<body>
<canvas width="400" height="400" id="goBoard">
<p>This example requires a browser that supports the
HTML5 canvas.</p>
</canvas>
</body>
Step 2 - Draw the Board Background
The file
go.js has the code for drawing the game board on the canvas. The first step was to give the board a wood-grain background. This jCanvas code selects the canvas tag, and then draws the image "board.jpg" at the point (10,10) on the canvas.
One interesting part here is that since it takes a while to load the image, and I want the image to be drawn first, I use the load property to set a callback. Essentially what this is doing is saying "Go ahead and draw this image, and when you're done call the function drawBoardLines( )".
When I left this out initially, the image kept showing up on top of everything else because all of the other operations would complete before the image loaded :-(
// load the image first
$("canvas").drawImage({
source: "board.jpg",
x: 10, y: 10,
width: 360,
height: 360,
fromCenter: false,
load: drawBoardLines //after image is loaded draw the lines on top
});
Step 3 - Draw the Edge
The next part is just a simple border for the game board. You can either use strokeStyle to create just a rectangular outline or fillStyle for a filled shape. I thought it was cool that the canvas supports rounded corners so I took advantage of the cornerRadius property to round them off a bit.
// draw the border
$("canvas").drawRect({
strokeStyle: "#000",
x: 0, y: 0,
width: 380,
height: 380,
fromCenter: false,
cornerRadius: 5
});
Step 4 - Draw the Lines
The next part was drawing the actual board lines. The Go board is a simple grid of 19 x 19 lines. jCanvas made it super easy to draw the lines by just specifying the beginning and ending points of each line inside two loops.
// draw horizontal lines
for(i=0; i<19; i++)
{
var px1 = 10;
var px2 = 370;
var py1 = (i * 20) + 10;
$("canvas").drawLine({
strokeStyle: "#000",
strokeWidth: 2,
x1: px1, y1: py1,
x2: px2, y2: py1
});
}
// draw vertical lines
for(i=0; i<19; i++)
{
var px1 = (i * 20) + 10;
var py1 = 10;
var py2 = 370;
$("canvas").drawLine({
strokeStyle: "#000",
strokeWidth: 1,
x1: px1, y1: py1,
x2: px1, y2: py2
});
}
Step 5 - Draw the Star Points
One unusual feature about the go board is a set of 9 points it uses for handicapping. These are tiny black circles called star points. Interestingly, the HTML5 canvas forces you to draw a 360 degree arc if you want a circle. The nice thing about jCanvas's drawArc is that it defaults to 360 degrees which makes drawing circles simple.
// draw starpoints
for(i=0; i<3; i++)
{
var px = (i*120) + 70;
for(j=0; j<3; j++)
{
var py = (j*120) + 70;
$("canvas").drawArc({
strokeStyle: "#000",
strokeWidth: 5,
x: px, y: py,
radius: 2
});
}
}
Step 6 - Putting it All Together
When I put all of the JavaScript code together it looked like this:
// wait until the page is loaded to draw the board
$(document).ready(function()
{
drawBoard();
});
// this function just draws the background
function drawBoard()
{
// load the image first
$("canvas").drawImage({
source: "board.jpg",
x: 10, y: 10,
width: 360,
height: 360,
fromCenter: false,
load: drawBoardLines //after image loads, this callback draws the lines on top
});
}
// this function draws the lines on top of the board image
function drawBoardLines()
{
// draw the border
$("canvas").drawRect({
strokeStyle: "#000",
x: 0, y: 0,
width: 380,
height: 380,
fromCenter: false,
cornerRadius: 5
});
// draw horizontal lines
for(i=0; i<19; i++)
{
var px1 = 10;
var px2 = 370;
var py1 = (i * 20) + 10;
$("canvas").drawLine({
strokeStyle: "#000",
strokeWidth: 2,
x1: px1, y1: py1,
x2: px2, y2: py1
});
}
// draw vertical lines
for(i=0; i<19; i++)
{
var px1 = (i * 20) + 10;
var py1 = 10;
var py2 = 370;
$("canvas").drawLine({
strokeStyle: "#000",
strokeWidth: 1,
x1: px1, y1: py1,
x2: px1, y2: py2
});
}
// draw starpoints
for(i=0; i<3; i++)
{
var px = (i*120) + 70;
for(j=0; j<3; j++)
{
var py = (j*120) + 70;
$("canvas").drawArc({
strokeStyle: "#000",
strokeWidth: 5,
x: px, y: py,
radius: 2
});
}
}
}
I named the file
go.js and I put it in the same directory as
go.html from Step 1. Next I downloaded jQuery and jCanvas and added those libraries to the directory. And finally, I created an image for the board, and put that in the same directory, too.
Then once I loaded
go.html into my browser I saw:
