I didn’t want to get bogged down in cross-browser differences, as well as in the implementation of primitives, so I immediately pushed the idea of ​​working directly with canvas further away – I started by looking for a graphics library (of course, free).

Initially, the eye fell on pixi.js – this is an engine for which there is a lot of documentation, about which they speak positively in terms of performance and, in general, are praised in every way.
However, deeper in search, I settled on phaser.js (there have already been articles on Habré about it) – this is a higher-level library that allowed me to forget about many nuances and focus directly on the game logic.

The engine made it possible to attach animations, background texture, camera, world borders and much more without any problems. And everything would be fine, but when it came time to check the work on other computers, with other operating systems, the following problems emerged:

1.1 The main problem – the background texture (tilesprite) is terribly slow on windows 7
I found this out from my work computer after the first deployment to hosting – FPS was very, very low – around 5. And so it was in all browsers except, surprisingly, IE – everything worked pretty well in it, albeit not perfect.

It took me a while to think about the background slowing down – first of all, I found out by typing that the game suddenly stops slowing down when the size of the browser window decreases. I didn’t manage to google something for such symptoms, so I, for the sake of prevention, decided to implement some of the practices that the guys from Mozilla advise – in particular, the use of the Object Pool (reuse of game objects). I did not achieve much success with such optimizations, and the profiler still showed that rendering eats up most of the resources.

Then, having resorted to gradually disabling the display of various elements of the game, I identified the culprit – tilesprite.

Googling on tilesprite, I found out that this problem is not mine alone, and the reason lies in the fact that the canvas is completely redrawn with any change – i.e. the small object has moved – we redraw the entire canvas, including the background, which gives us a high expense for rendering.

In an attempt to solve this problem, I moved the background to a separate canvas with a lower z-index, so that it redraws separately, regardless of moving objects – this did not give much results.

In the end, I decided to abandon phaser.js and work directly with the canvas, created to draw the background – as a result, the FPS grew to about 20.