Uncaught TypeError: Cannot read property 'render' of undefined

Question

i'm still learning how to do stuffs in a canvas like this one. Rendering a rectangle object in a y coordinates.

function initCanvas(){
var ctx = document.getElementById('canvas').getContext('2d');
var cW = ctx.canvas.width, cH = ctx.canvas.height;
var y = 0, x = 0;

function rectObj(){
    this.x = 0, this.y = 0;
    this.render = function(ctx, lx, ly, lw, lh, clr){
        ctx.fillStyle = clr;
        ctx.fillRect(lx, ly, lw, lh);
    }
}

var a = rectObj();

function animate(){
    ctx.clearRect(0,0, cW, cH);
    a.render(ctx, 0, a.y, 50, 50, "blue");
    a.y++;
}
var animateInterval = setInterval(animate, 30);

}window.addEventListener('load', function(event){ initCanvas(); });

Anatoliy Arkhipov · Accepted Answer · 2015-02-25 07:55:00Z

1

You should call the function with new operator:

var a = new rectObj();

answered Feb 25, 2015 at 7:55

Anatoliy Arkhipov

7016 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3323654 Over a year ago

I tried rendering an oop image. But it cannot be rendered though I used the same format of code.. function landObj(){ var land = new Image(); land.src = "land.png"; this.x = 0, this.y = 0, this.w = 0, this.h = 0; this.render = function(ctx, lx, ly, lw, lh){ ctx.drawImage(land, x, y, w, h); } } var land1 = new landObj(); function animate() { ctx.clearRect(0,0, cW, cH); land1.render(ctx, 0, a.y, 50, 50); land1.y++; }

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot read property 'render' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related