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>
3 answers
solution1
2 ACCPTED 2020-06-24 13:48:51
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>
solution2
1 2020-06-24 13:50:09
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>
solution3
1 2020-06-24 14:39:57
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!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.