Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How to scale particles from center using html canvas

Recommended Posts

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

Link to comment
Share on other sites

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.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);




And more particle stuff.



  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.