Loading an image onto a canvas with javaScript

Question

Hi all im currently testing using the canvas element to draw all of the backgrounds(i will add effects later to these images later and is the reason im not using css to load

Answer 1

Assign your local file resource (url) to image source and draw image using context from canvas you want to load. That's it. See code bellow.

var loadImage = function (url, ctx) {
  var img = new Image();
  img.src = url
  img.onload = function () { 
    ctx.drawImage(img, 0, 0);
  }
}