CODEWITHSUNDEEP
javascriptperformancecanvasmemory
Романов Романович
Романов Романович

Reputation: 3

How to increase canvas perfomance

I wanna to scale the game from 1 ship to fleet of 10 000 ships if it is posible to milion of ships.

Canvas drawing all what you tell him to draw even if it is negative coordinates. So I draw only game objects which is in the display range.

I used everywhere ES5 which is faster and more supported. Scaling and rotation calculation is made by Camera, Mouse and KeyBoard events (cant apply only for rockets and laser beams).

But the main time is used by this part of code which used for each game object in display range (there can be thousands game objects or few):

`ctx.save()
ctx.translate(drawX, drawY);
ctx.rotate(alfa);
ctx.drawImage(images.image, -width/2, -height/2, width, height);
ctx.restore()`

How can I make it faster?

What is the best thing to do to increase perfomance? Now I thinkg about removing ctx.rotate(alfa) and rotate image based on events and use rotated image and resizing that image with current scale (only for objects in display range).

Thanks.

Upvotes: 0

Views: 79

Answers (1)

Lucas Bebber
Lucas Bebber

Reputation: 246

You are probably going to run into hard limits if you try to render some thousands, let alone a million, of independent things in 2d canvas alone. You would probably be better using WebGL, perhaps with a library like PixiJS.

However, if you still plan on using canvas, user Blindman67 gave some good tips regarding performance in a different question. In short, to your case, avoid using save/restore and use setTransform instead, and draw images with dimensions that are power of 2 (2, 4, 8, 16, 32, etc.).

Upvotes: 2

Related Questions