Of course, it does no good to generate a level if we don't display it to the player. That's what we'll be doing in this task.
First, we set the canvas up, also taking care to deal with retina screens in the process.
var c = $ge("gameView_canvas");
var ctx = c.getContext("2d");
c.setAttribute ("width", cWidth * window.devicePixelRatio);
c.setAttribute ("height",cHeight * window.devicePixelRatio);
c.setAttribute ("left", (screen.width/2) - (cWidth/2));
c.style.width = ""+cWidth+"px";
c.style.height = ""+cHeight+"px";We store these as global variables, because it is important not to have to do DOM walking for every frame of content—that only slows us down—something that is a bad thing when we're trying to render a frame within 16 milliseconds (the maximum amount of time we can take if we're targeting 60 fps).
function doAnim(timestamp)
{
…
ctx.save();
ctx.scale (window.devicePixelRatio, window.devicePixelRatio);
ctx.fillStyle = "#802010...