Rendering a texture before drawing it to the canvas

Faster Background Patterns

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
}