Mgiyuk

Why is my image width and height equal to 0? [duplicate] This question already has an answer here: I am trying to make a infinite scrolling game in javascript. The following code works as expected (it doesn't work here because the images cannot be uploaded): class Vec { constructor(x = 0, y = 0) { this.x = x; this.y = y; } } class Rect { constructor(src) { this.pos = new Vec; this.vel = new Vec; this.image = new Image(); this.image.src = src; } get left() { return this.pos.x; } get right() { return this.pos.x + this.image.width; } get top() { return this.pos.y; } get bottom() { return this.pos.y + this.image.height; } } class Player extends Rect { constructor() { super("images/frog-still.png"); this.pos.x = 100; this.pos.y = HEIGHT - GROUND_Y - this.image.height; } } class Enemy extends Rect { constructor() { super("images/spike.png"); this.image.width = this.image.width / ...

Drawing Mouse Select Range on HTML5 Canvas Doesn't Clear On mouse down I am storing the mouse starting x,y and then calculating the mouse selection range to draw a rectangle displaying the selection box. This works great, however until I release the mouse button I see every rectangle drawn for the mouse selection. Where am I going wrong? this.drawRange = function() { var c = engine.game_screen; var top_left = [mouse.start_x, mouse.start_y]; var top_right = [mouse.start_x + mouse.range_width, mouse.start_y]; var bottom_left = [mouse.start_x, mouse.start_y + mouse.range_height]; var bottom_right = [mouse.start_x + mouse.range_width, mouse.start_y + mouse.range_height]; c.beginPath; c.moveTo(top_left[0], top_left[1]); c.lineTo(top_right[0], top_right[1]); c.lineTo(bottom_right[0], bottom_right[1]); c.lineTo(bottom_left[0], bottom_left[1]); c.l...