javascript - A HTML5 canvas ERROR -

javascript - A HTML5 canvas ERROR -

i'am trying write puzzle game in canvas,so need give each part of puzzle block background image. error "uncaught typeerror: cannot read property 'drawimage' of undefined "

any help 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 = 0; < 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); } }

your draw() function requires context parameter you're not passing when you're calling within block() function/object. add together context parameter , utilize when calling "this.draw()".

javascript canvas