Professional HTML5 Mobile Game Development

Getting Started with the Canvas Tag

You’ve already seen that getting a <canvas> element onto your page is as easy as adding the element into your HTML document with the width and height attributes:

<canvas id="mycanvas" width='640' height='480'></canvas>

This creates an element 640 pixels wide by 480 pixels tall on the page, and by default the CSS width and height of the <canvas> element are set up to match the pixel width and height.

Understanding CSS and Pixel Dimensions

The CSS dimensions and pixel dimensions of the page don’t have to be the same, however. You can set the CSS width and height (which determines the size of the element on the page) completely independent of the pixel width and height. To make this clear, Listing 15-1 shows some code that puts a random colored, 1-pixel rectangle at every pixel position of each of four different pixel-sized Canvas elements. All canvas elements are set—via a CSS <style> tag—to 200 pixels wide by 200 pixels tall.

Listing 15-1: Examining CSS size versus pixel size

 <script src='jquery.min.js'></script> <style> canvas { width: 200px; height: 200px; } </style> <canvas width="2" height="2"></canvas> <canvas width="10" height="10"></canvas> <canvas width="50" height="50"></canvas> <canvas width="10" height="100"></canvas> <script> $("canvas").each(function() { var ctx = this.getContext("2d"); for(var y=0,h=this.height;y<h;y++) { for(var x=0,w=this.width;x<w;x++) { var r = Math.floor(Math.random()*255), g = Math.floor(Math.random()*255), ...