A HTML5 canvas ERROR

Question

I'am trying to write a puzzle game in canvas,so i need to give each part of puzzle block a background image. but always a error "Uncaught TypeError: Cannot read property 'drawImage' of undefined "

any help will be appreciated!

(function(){
    function Block(image, l, t, w, h){
        this.image = image;
        this.left = l;
        this.top = t;
        this.width = w;
        this.height = h;
    }
    Block.prototype.draw = function(context){
        context.drawImage(this.image, this.left, this.top, this.width, this.height, this.left, this.top, this.width, this.height);
    }
    window.Block = Block;
})();
var el = document.getElementById("puzzle_area");
var ctx = el.getContext("2d");

var image = new Image();
image.src = "background0.jpg";
image.onload = init;
var width = 100;
var height = width;
function init(){
    for(var i = 0; i < 16; i++){
        var x = (i % 4) * width;
        var y = parseInt(i / 4) * height;
        var block = new Block(image, x, y, width, height);
        block.draw(ctx);
    }
}

Answer 1

Your draw() function requires a context parameter which you're not passing to it when you're calling it from within your Block() function/object. Add a context parameter to that and use it when calling "this.draw()".

Answer 2

I haven't tested it, but here is what I changed your code to:

(function(){
    function Block(context, image, l, t, w, h){
        this.image = image;
        this.left = l;
        this.top = t;
        this.width = w;
        this.height = h;
        this.context = context;
        this.draw();
    }
    Block.prototype.draw = function(){
        this.context.drawImage(this.image, -this.left, -this.top, this.width, this.height, this.left, this.top);
    }
    window.Block = Block;
})();
var el = document.getElementById("puzzle_area");
var ctx = el.getContext("2d");

var image = new Image();
image.src = "background0.jpg";
image.onload = init;
var block = null;
var width = 100;
var height = width;
function init(){
    for(var i = 0; i < 9; i++){
        var x = (i % 400) * width;
        var y = parseInt(i / 400) * height;
        block = new Block(ctx, image, x, y, width, height);
        // block is drawn automatically, no need to draw it again
     // block.draw();
    }
}