CODEWITHSUNDEEP
javascripthtmlanimationcanvashtml5-canvas
Peter Ringelmann
Peter Ringelmann

Reputation: 118

HTML5 Canvas - Scaling relative to the center of an object without translating context

I'm working on a canvas game that has several particle generators. The particles gradually scale down after being created. To scale the particles down from their center points I am using the context.translate() method:

context.save();
context.translate(particle.x, particle.y);
context.translate(-particle.width/2, -particle.height/2);
context.drawImage(particle.image, 0, 0, particle.width, particle.height);
context.restore();

I've read several sources that claim the save(), translate() and restore() methods are quite computationally expensive. Is there an alternative method I can use?

My game is targeted at mobile browsers so I am trying to optimize for performance as much as possible.

Thanks in advance!

Upvotes: 5

Views: 4330

Answers (1)

user1693593
user1693593

Reputation:

Yes, just use setTransform() at the end instead of using save/restore:

//context.save();
context.translate(particle.x, particle.y);
context.translate(-particle.width/2, -particle.height/2);
context.drawImage(particle.image, 0, 0, particle.width, particle.height);
//context.restore();
context.setTransform(1,0,0,1,0,0);   // reset matrix

Assuming there are no other accumulated transform in use (in which case you could refactor the code to set absolute transforms where needed).

The numbers given as argument are numbers representing an identity matrix, ie. a reset matrix state.

This is much faster than the save/restore approach which stores and restores not only transform state, but style settings, shadow settings, clipping area and what have you.

You could also combine the two translation calls into a single call, and use multiply instead of divide (which is much faster at CPU level):

context.translate(particle.x-particle.width*0.5, particle.y-particle.height*0.5);

or simply use the x/y coordinate directly with the particle "shader" without translating at all.

Upvotes: 9

Related Questions