CODEWITHSUNDEEP
javascripthtmlcanvas
Morrismario
Morrismario

Reputation: 17

html5 canvas object drawing

im pretty new at canvas, but im trying to draw a falling object. First im trying to just draw an object, but its not working. How can i just draw an object (and if you could be so nice but not necessary to let me know how i can make it move)? Or what am I doing wrong here? Code:

let c, ctx;

window.onload = function(){
    
    c = document.getElementById("boom");
    ctx = c.getContext("2d");
    c.width = window.innerwidth;
    c.height = window.innerHeight;

    setup();
    draw();
};

function draw(){
    //window.requestAnimationFrame(draw);
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "red";
    ctx.fillRect(100, 100, 100, 100);
    regen.push(new regen(this.x, this.y, this.w, this.h, this.color));
};

function setup(){

}

function regen(x, y, w, h, color){
    this.x = 100;
    this.y = 100;
    this.width = 20;
    this.height = 40;
    this.color = "blue";
    //this.xSpeed = 4;
    //this.ySpeed = 4;

    this.draw = function(){

        //this.update = function(){
            //this.x += this.xSpeed;
            //this.y += this.ySpeed; 
        //}
    }
}



function getRndFloat(min, max) {
    return Math.random() * (max - min + 1) + min;
}

Upvotes: 0

Views: 56

Answers (1)

Darth
Darth

Reputation: 1650

You got typo in innerwidth: it must be innerWidth. But you got undefined and your canvas has no width

Upvotes: 1

Related Questions