How to draw objects to canvas?

Question

So basically I want to make an object appear on a simple HTML canvas through the class GameObject and I can't get it done. The code compiles fine but it just doesn't appear on the screen. I assume it has to do with the variable ctx but I'm not too sure.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

square = new GameObject(20, 40, 50, 50, "blue");
square.drawObject();

class GameObject {
    constructor(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }

     drawObject() {
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

<style>
    * { padding: 0; margin: 0; }
    canvas { background: #eee; display: block; margin: 0 auto; }
</style>

<canvas id="myCanvas" width="480" height="320"></canvas>

are there errors in your console? I'm gona guess there's something like `cannot read property rect of undefined`? — bryan60, Jun 24 '20 at 13:52

score 2 · Accepted Answer · answered Jun 24 '20 at 13:48

You can't use JS classes before they are defined. If you move the initialization of the square game object below the GameObject class definition it works:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

class GameObject {
    constructor(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }

     drawObject() {
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

square = new GameObject(20, 40, 50, 50, "blue");
square.drawObject();

* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }

<canvas id="myCanvas" width="480" height="320"></canvas>

score 1 · Answer 2 · answered Jun 24 '20 at 13:50

Just initialize the class before using it.

Another point is that you dont need to set x,y,w,h,color because you are setting it in the constructor.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

class GameObject {
    constructor(x, y, w, h, color) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.color = color;
    }

     drawObject() {
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

const square = new GameObject(20, 40, 50, 50, "blue");
square.drawObject();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background: #eee;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script src="index.js"></script>
</body>
</html>

score 1 · Answer 3 · answered Jun 24 '20 at 14:39

You might be confusing ES5 Classes with ES6. I'm not an expert on JS and I needed to do some digging myself on this subject. Here is what I came up with. And, I hope someone else with more expertise will jump in and help here. You can't declare variables in a ES6 Class Object. It's important to remember Classes can only contain methods. This has tripped me up in the past too. That may be the reason you are not getting nothing on your canvas. Are you getting any error messages? Check out these references: ES6 class variable alternatives Here is a chapter On Objects and it shows the difference between ES5 and ES6 Class objects. https://eloquentjavascript.net/06_object.html

I hope this helps!

How to draw objects to canvas?

3 Answers3