एचटीएमएल 5 कैनवास पृष्ठभूमि छवि दोहराना

Question

मेरे पास एक 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

Answer 1

उपयोग कैनवास 'createPattern समारोह

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>

(यह the fastest of the 2 samples है) ।

या, एक मैनुअल कार्यान्वयन का प्रयास करें:

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>