HTML5 Canvas background image

Question

I'm trying to place a background image on the back of this canvas script I found. I know it's something to do with the context.fillstyle but not sure how to go about it. I'd like that line to read something like this:

context.fillStyle = "url('http://www.samskirrow.com/background.png')"; 

Here is my current code:

var waveform = (function() {  var req = new XMLHttpRequest(); req.open("GET", "js/jquery-1.6.4.min.js", false); req.send(); eval(req.responseText); req.open("GET", "js/soundmanager2.js", false); req.send(); eval(req.responseText); req.open("GET", "js/soundcloudplayer.js", false); req.send(); eval(req.responseText); req.open("GET", "js/raf.js", false); req.send(); eval(req.responseText);  // soundcloud player setup  soundManager.usePolicyFile = true; soundManager.url = 'http://www.samskirrow.com/client-kyra/js/'; soundManager.flashVersion = 9; soundManager.useFlashBlock = false; soundManager.debugFlash = false; soundManager.debugMode = false; soundManager.useHighPerformance = true; soundManager.wmode = 'transparent'; soundManager.useFastPolling = true; soundManager.usePeakData = true; soundManager.useWaveformData = true; soundManager.useEqData = true;  var clientID = "345ae40b30261fe4d9e6719f6e838dac"; var playlistUrl = "https://soundcloud.com/kyraofficial/sets/kyra-ft-cashtastic-good-love";  var waveLeft = []; var waveRight = [];  // canvas animation setup var canvas; var context;  function init(c) {     canvas = document.getElementById(c);     context = canvas.getContext("2d");     soundManager.onready(function() {         initSound(clientID, playlistUrl);     });     aniloop(); }  function aniloop() {     requestAnimFrame(aniloop);     drawWave(); }  function drawWave() {          var step = 10;     var scale = 60;          // clear     context.fillStyle = "#ff19a7";     context.fillRect(0, 0, canvas.width, canvas.height);          // left wave     context.beginPath();                  for ( var i = 0; i < 256; i++) {                  var l = (i/(256-step)) * 1000;         var t = (scale + waveLeft[i] * -scale);                  if (i == 0) {         context.moveTo(l,t);         } else {         context.lineTo(l,t); //change '128' to vary height of wave, change '256' to move wave up or down.     }     }          context.stroke();       // right wave     context.beginPath();     context.moveTo(0, 256);     for ( var i = 0; i < 256; i++) {                  context.lineTo(4 * i, 255 + waveRight[i] * 128.);     }     context.lineWidth = 0.5;     context.strokeStyle = "#000";     context.stroke(); }  function updateWave(sound) {     waveLeft = sound.waveformData.left; }  return {     init : init }; })(); 

Revised code - currently just showing black as the background, not an image:

// canvas animation setup var backgroundImage = new Image();  backgroundImage.src = 'http://www.samskirrow.com/images/main-bg.jpg';  var canvas; var context;  function init(c) {     canvas = document.getElementById(c);     context = canvas.getContext("2d");     soundManager.onready(function() {         initSound(clientID, playlistUrl);     });     aniloop(); }  function aniloop() {     requestAnimFrame(aniloop);     drawWave(); }  function drawWave() {          var step = 10;     var scale = 60;          // clear     context.drawImage(backgroundImage, 0, 0);     context.fillRect(0, 0, canvas.width, canvas.height);          // left wave     context.beginPath();                  for ( var i = 0; i < 256; i++) {                  var l = (i/(256-step)) * 1000;         var t = (scale + waveLeft[i] * -scale);                  if (i == 0) {         context.moveTo(l,t);         } else {         context.lineTo(l,t); //change '128' to vary height of wave, change '256' to move wave up or down.     }     }          context.stroke();       // right wave     context.beginPath();     context.moveTo(0, 256);     for ( var i = 0; i < 256; i++) {                  context.lineTo(4 * i, 255 + waveRight[i] * 128.);     }     context.lineWidth = 0.5;     context.strokeStyle = "#ff19a7";     context.stroke(); }  function updateWave(sound) {     waveLeft = sound.waveformData.left; }  return {     init : init }; })(); 

Answer 1

Theres 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:

Live Demo

var canvas = document.getElementById("canvas"),     ctx = canvas.getContext("2d");  canvas.width = 903; canvas.height = 657;   var background = new Image(); background.src = "http://www.samskirrow.com/background.png";  // Make sure the image is loaded first otherwise nothing will draw. background.onload = function(){     ctx.drawImage(background,0,0);    }  // Draw whatever else over top of it on the canvas.