This forum is read only and just serves as an archive. If you have any questions, please post them on

1 decade ago by tarrent

Hi All,

I'd like to know how are images from an AnimationSheet rendered on canvas. Are they saved saved in an offscreen canvas before rendering?

Suppose I have a 1200x100 sprite sheet of a walking person with each frame 100x100 in size. This will make me have 12 pcs of 100x100 animation frames.

I am interested to know if I can save more gpu/cpu usage if the 1200x100 sprite sheet image will be saved in an offscreen canvas first, before rendering on .draw(). Or is Impact doing this already?


1 decade ago by Joncom

I don't believe it draws to an off-screen canvas first, no. Have a look in animation.js, at the draw method (not much code) for a better idea of how it's working.

1 decade ago by tarrent

Hi, thanks for the reply Joncom. Yes, I think Impact's image.js is not rendering things from offscreen, its directly using canvas' drawImage when I looked at its draw function. Might be able to tweak the lib some time so it will draw from offscreen.

	draw: function( targetX, targetY, sourceX, sourceY, width, height ) {
		if( !this.loaded ) { return; }
	        // ..... more codes here

		ig.system.context.drawImage(, sourceX, sourceY, width, height,
			width, height

1 decade ago by Joncom

Are you running into performance issues which make you want to take this approach? I've had quite a bit of luck with using the vanilla method and usually get a decent framerate. Good luck either way.
Page 1 of 1
« first « previous next › last »