How to scale particles from center using html canvas

[jparrott 2 Likes (Newbie)]

Currently faced with a problem of not being able to find the center of the particles, when I scale I am not sure where the ctx.translate point is.

In the function "pixelOverlay.prototype.draw" this is where the ctx.translate registration point is set but as I animate all the particles come from the far right when I am hoping to scale from the center and still animate x/y value.

 

Thank for your time!!

 

See the Pen xoejPR by John_Joe_Parrott (@John_Joe_Parrott) on CodePen

[OSUblake 9,990 Likes (Superhero)]

See the STARS acronym here.

 

 

 

Your order is wrong, and you should use translate instead of drawing something at an xy coord.  

 

var originX = this.width / 2;
var originY = this.height / 2;

creative.ctx.save();
creative.ctx.translate(this.x + originX, this.y + originY);
creative.ctx.scale(this.scaleX, this.scaleY);
creative.ctx.translate(-originX, -originY);
creative.ctx.fillStyle = this.fill;
creative.ctx.fillRect(0, 0, this.width, this.height);
creative.ctx.restore();

 

 

 

And more particle stuff.

 

 

[jparrott 2 Likes (Newbie)]

This is very awesome thank you OSUblake!!!!