javascript: use addEventListener event object E to finds coordinates of the click and then add a rectangular shape at the same location on canvas

Question

need help!!! i am following this new javascript 2D gaming video and i am currently stuck on 2:32:29 where we are making an explosion effect on canvas where the mouse clicked. https://www.youtube.com/watch?v=GFO_txvwK_c&t=9365s.

problem: whenever i click on the canvas, no sqaure shapes shows up, in the tutorial it mentioned you will have to offset the e.x and e.y to make it relative the canvas. but i realized whenever i click the top left corner of the screen. sometimes an elongated rectangular shape does appear but when i offset my e.x and e.y. i can not get the correct offset to make it work. could anyone help explain why i am getting this weird offset effect on my event.x and event.y values and how to fix it? thanks a lot!!! you can see the thrid picture attached for my code adding the offset suggested by video and it still does not work.

const canvas=document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas,height = 700;
const explosion =[];

class Explosion {
    constructor(x,y){
        this.x = x;
        this.y = y;
        this.spriteWidth = 200;
        this.spriteHeight = 179;
        this.width = this.spriteWidth/2;
        this.height = this.spriteHeight/2;
        this.image = new this.image();
        this.image.src = "boom.png";
        this.frame=0;
    }

    update(){
        this.frame++;
    }
    draw(){
        ctx.drawImage(this.image,this.spriteWidth*this.frame,0,this.spriteWidth,this.spriteHeight,this.x,this.y,this.width, this.height);
    }
}

window.addEventListener('click', function(e){

    ctx.fillStyle= 'white';
    ctx.fillRect(e.x,e.y,50,50);

})

enter image description here enter image description here

enter image description here

You may wanna start with fixing the typo in line 4 (comma instead of dot). Should fix the "elongated rectangles" issue. — Kpro, Aug 11 '22 at 20:24
thanks for the help!!! sorry i am really new and found it annoying that JavaScript does not tell me whenever there is a typo.... — LittleZoski, Aug 11 '22 at 20:27

score 0 · Accepted Answer · answered Aug 11 '22 at 20:14

First, I wouldn't attach the click listener to the global window object. As your merely interested in clicks happening inside the <canvas> element, attach it to this instead.

Second, the x and y properties returned by the mouseevent don't match what you might expect because it does not take into account the offset of the HTML element on the page. Try using the offsetX and offsetY properties instead.

Here's an example:

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 700;
const explosion = [];

class Explosion {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.spriteWidth = 200;
    this.spriteHeight = 179;
    this.width = this.spriteWidth / 2;
    this.height = this.spriteHeight / 2;
    this.image = new this.image();
    this.image.src = "boom.png";
    this.frame = 0;
  }

}

canvas.addEventListener('click', function(e) {
  ctx.fillStyle = 'blue';
  ctx.fillRect(e.offsetX, e.offsetY, 50, 50);

});

<canvas id="canvas1" style="background: #eeeeee"></canvas>

It's actually often better to listen to the events on the window rather than on the canvas. For instance here there is a 25px radius around the canvas border that can't be reached (e.g the user can't fill only 2px of the corners, they have to paint at least a 25x25px square. (Edit, that was assuming the fillRect was centered which it isn't in this demo, so they actually have to draw a 50x50 on the top left corner and can draw a smaller one on the bottom right corner) — Kaiido, Aug 12 '22 at 00:57

javascript: use addEventListener event object E to finds coordinates of the click and then add a rectangular shape at the same location on canvas

1 Answers1