Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rendering a texture before drawing it to the canvas
var canvas = document.querySelectorAll('canvas')[0]
canvas.width = 400;
canvas.height = 400;
var ctx = canvas.getContext('2d')
var img=document.getElementById("texture");
//var pat=ctx.createPattern(img,"repeat");
//var time = performance.now()
//for(var i = 0; i < 1000; i++){
//ctx.rect(0,0,canvas.width,canvas.height);
//ctx.fillStyle=pat;
//ctx.fill();
//}
var bg=makeBackground(img, 50, 50)
var time = performance.now()
for(var i = 0; i < 1000; i++){
ctx.drawImage(bg, 0, 0)
}
function makeBackground(img, width, height){
var bg = document.createElement('canvas')
var ctx = bg.getContext('2d')
bg.width = width; bg.height = height
var x = 0
while(x < width){
var y = 0
while(y < height){
ctx.drawImage(img, x, y)
y += img.height
}
x+= img.width
}
return bg
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment