HTML5 immagine di sfondo canvas ripetuta

Question

Ho una tela html5 che disegna un'onda sonora. Ho impostato lo sfondo come immagine di sfondo, tuttavia, voglio ripetere questa immagine di sfondo. Qualcuno può dirmi come farei questo e quello che ho bisogno di aggiungere nel mio codice:

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 
}; 
})(); 

Si può vedere questo codice in azione qui: http://www.samskirrow.com/client-kyra

Answer 1

Usa la tela createPattern funzione

var canvas = document.getElementById("canvas"), 
 
    context = canvas.getContext("2d"), 
 
    img = new Image(); 
 

 
img.src = 'https://www.google.nl/images/srpr/logo3w.png'; 
 

 
img.onload = function(){ 
 
    // create pattern 
 
    var ptrn = context.createPattern(img, 'repeat'); // Create a pattern with this image, and set it to "repeat". 
 
    context.fillStyle = ptrn; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); // context.fillRect(x, y, width, height); 
 
}

<canvas id="canvas" width="600px" height="600px"></canvas>

(Questo è the fastest of the 2 samples) .

Oppure, provare un'implementazione manuale:

var canvas = document.getElementById("canvas"), 
 
    context = canvas.getContext("2d"), 
 
    img = new Image(); 
 

 
img.src = 'https://www.google.nl/images/srpr/logo3w.png'; 
 

 
img.onload = function(){ 
 
    for (var w = 0; w < canvas.width; w += img.width) { 
 
     for (var h = 0; h < canvas.height; h += img.height) { 
 
      context.drawImage(img, w, h); 
 
     } 
 
    } 
 
}

<canvas id="canvas" width="600px" height="600px"></canvas>