How to draw objects to canvas?

by

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>

7 thoughts on “How to draw objects to canvas?”

  1. 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>
    Reply

  2. 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!

    Reply

  3. 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>
    Reply

Leave a Comment