javascript - Canvas click particle explosion effect not targeting mouse position -

i'm trying simple particle explosion effect when user clicks somewhere on app get's user click position, create canvas, create explosion effect , remove canvas.

i'm totally new canvas , got idea site: canvas example

the case it's not getting te click position right explosion effect, should start center @ clicked area. farther go left/top corner, farther down screen effect shown.

so here's code:

in app.components.ts (whose main file, need work on every page, decided put code here) have following:

import { particle } './particle'; //  import particle function  // these particle options public angle: number = 90; public speed: number = 8; public particle_size: number = 1; public number_of_particles: number = 20; public range_of_angle: number = 360; public particle_lifespan: number = 15; public particle_color: string = 'rgb(255,0,0)'; public particles: any[] = []; public pctxwidth: number = window.innerwidth; // not using public pctxheight: number = window.innerheight; // not using  document.addeventlistener('click', (data) => {    // create canvas html element , append in body   let c = document.createelement('canvas');   c.classname = 'clique';   c.style.position = 'absolute';   c.style.width = string(window.innerwidth) + 'px'; //i'm using whole screen size, doesn't needs big, can 80px   c.style.height = string(window.innerheight) + 'px';   c.style.left = '0px';   c.style.top = '0px';   document.body.appendchild(c);    // page click position, tried without - c.offsetleft   const x = data.pagex - c.offsetleft,         y = data.pagey - c.offsettop;    // create 2dcontext , call spark function   let pctx = c.getcontext("2d");   this.spark(x, y, this.angle, pctx, c);   this.smartaudio.play('click'); }, true);  // draw new series of spark particles spark = (x, y, angle, pctx, c) => {     // create 20 particles 10 degrees surrounding angle     (var = 0; < this.number_of_particles; i++) {         // offset between range of particle         let offset = math.round(this.range_of_angle * math.random())             - this.range_of_angle / 2;         let scalex = math.round(this.speed * math.random()) + 1;         let scaley = math.round(this.speed * math.random()) + 1;         this.particles.push(new particle(x, y,             math.cos((angle + offset) * math.pi / 180) * scalex,             math.sin((angle + offset) * math.pi / 180) * scaley,             this.particle_lifespan, this.particle_color, pctx));     }     this.animationupdate(pctx, c, x, y); }  animationupdate = function (pctx, c, x, y) {     // update , draw particles     pctx.clearrect(0, 0, x, y);     (var = 0; < this.particles.length; i++) {         if (this.particles[i].dead()) {             this.particles.splice(i, 1);             i--;         }         else {             this.particles[i].update();             this.particles[i].draw(pctx);         }     }     if (this.particles.length > 0) {         // await next frame         requestanimationframe(() => { this.animationupdate(pctx, c, x, y) });     } else {         document.body.removechild(c);     } } 

and here particle:

export function particle(x, y, xvelocity, yvelocity, lifespan, color, pctx) {   // set initial alpha 1.0 (fully visibile)   this.alpha = 1.0;   // dalpha amount alpha changes per frame, randomly   //    scaled around provided particle lifespan   this.dalpha = 1 / (math.random() * lifespan + 0.001);    // updates particle's position velocity each frame,   //    , adjust's alpha value   this.update = function() {     x += xvelocity;     y -= yvelocity;     this.alpha -= this.dalpha;     if (this.alpha < 0)         this.alpha = 0;   }    // draw particle screen   this.draw = function(pctx: any) {     pctx.save();     pctx.fillstyle = color;     pctx.globalalpha = this.alpha;     pctx.beginpath();     pctx.arc(x, y, 1, 0, 2 * math.pi, false);     pctx.closepath();     pctx.fill();     pctx.restore();   }    // returns true if particle "dead":   //    i.e. delete , stop updating if returns true   this.dead = function() {     return this.alpha <= 0;   } } 

so doing wrong? how can make particle effect explode clicked?

here image of i'm getting, i've clicked on x in top left, explosion occured bellow clicked area.

thanks in advance.

i cant see setting canvas resolution, setting canvas display size. explain mismatch between rendering , user io.

try following when create canvas

c.style.width = (c.width = innerwidth) + 'px';  c.style.height = (c.height = innerheight) + 'px'; 

that match canvas resolution display size, way rendering @ correct pixel locations.