HTML5 canvas background image repeat

Question

I have a html5 canvas that draws a sound wave. I have set the background as an background image, however, I want this background image to repeat. Can anyone tell me how I would do this and what I need to add into my code:

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

You can see this code in action here: http://www.samskirrow.com/client-kyra

• Muhammad Shoaib: can't you use CSS for background repeat?
• Cerbrus: @MuhammadShoaib: Nope, not for images drawn onto the canvas.

Answer 1

Use the canvas' createPattern function

const canvas = document.getElementById("canvas"),
 context = canvas.getContext("2d"),
 img = new Image();
img.src = 'https://www.google.nl/images/srpr/logo3w.png';
img.addEventListener('load', () => {
 const 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>

(This is the fastest of the 2 samples).

Or, try a manual implementation:

const canvas = document.getElementById("canvas"),
 context = canvas.getContext("2d"),
 img = new Image();
img.src = 'https://www.google.nl/images/srpr/logo3w.png';
img.addEventListener('load', () => {
 for (let w = 0; w < canvas.width; w += img.width) {
 for (let h = 0; h < canvas.height; h += img.height) {
 context.drawImage(img, w, h);
 }
 }
})

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

• Damsorian: @Cerbrus do you know how to move the background pattern like this bdadam.com/blog/…
• Cerbrus: @Damsorian: you just linked to a tutorial that explains how that works.
• Kokodoko: To repeat a canvas pattern automatically (without manually creating copies) you can use pattern.setTransform());: developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/…