Javascript/HTML5 using image to fill canvas

canvas, html, javascript

Solution

You have to wait until the image loads, use the image's onload property to know when it loads.

var blueprint_background = new Image();
blueprint_background.src = 'images/blueprint_background.png'; 
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "repeat");
    context.fillStyle = pattern;
    context.fill();
};

Problem

I'm trying to get an image to fill up my canvas. Here is the code I'm trying: ``` var blueprint_background = new Image(); blueprint_background.src = 'images/blueprint_background.png'; var pattern = context.createPattern(blueprint_background, "repeat"); context.fillStyle = pattern; context.fill(); ``` The issue is that nothing shows up. I was able to do the the basic context.fillRect(..) example, but this is giving me troubles. Thanks.

Original source