Повторное изображение фона холста HTML5

У меня есть холст html5, который рисует звуковую волну. Я установил фон как фоновое изображение, однако, я хочу, чтобы это фоновое изображение повторялось. Может ли кто-нибудь сказать мне, как я это сделаю, и что мне нужно добавить в мой код:

var backgroundImage = new Image(); 
backgroundImage.src = 'http://www.samskirrow.com/client-kyra/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);

    // left wave
    context.beginPath();
    context.moveTo(0, 256);
    for ( var i = 0; i < 256; i++) {
        context.lineTo(6 * i, 257 + waveLeft[i] * 80.);
    }
    context.lineWidth = 1;
    context.strokeStyle = "#000";
    context.stroke();

    // right wave
    context.beginPath();
    context.moveTo(0, 256);
    for ( var i = 0; i < 256; i++) {
        context.lineTo(6 * i, 256 + waveRight[i] * 80.);
    }
    context.lineWidth = 1;
    context.strokeStyle = "#000";
    context.stroke();
}

function updateWave(sound) {
    waveLeft = sound.waveformData.left;
}

return {
    init : init
};
})();

Вы можете увидеть этот код в действии здесь: http://www.samskirrow.com/client-kyra

Ответ 1