html5 background url,html - HTML5 Canvas background image - Stack Overflow

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

};

})();