html canvas background

1Theres a few ways you can do this. You can either add a background to the canvas you are currently working on, which if the canvas isn't going to be redrawn every loop is fine. Otherwise you can make a second canvas underneath your main canvas and draw the background to it. The final way is to just use a standard <img> element placed under the canvas. To draw a background onto the canvas element you can do something like the following:
2
3Live Demo
4
5var canvas = document.getElementById("canvas"),
6    ctx = canvas.getContext("2d");
7
8canvas.width = 903;
9canvas.height = 657;
10
11
12var background = new Image();
13background.src = "http://www.samskirrow.com/background.png";
14
15// Make sure the image is loaded first otherwise nothing will draw.
16background.onload = function(){
17    ctx.drawImage(background,0,0);   
18}
19
20// Draw whatever else over top of it on the canvas.