Lag with Grid turned on at higher resolutions

[Lutia]

At higher resolutions, with the grid turned on and zoomed in far enough to render, there is an immense amount of lag when doing any action (very noticeable at 256x256). From what I checked, the grid width had nothing to do with the issue. The issue can be replicated on the desktop and chrome version (didn't check firefox).

[juliandescottes]

Indeed, it's much slower.

When the grid is activated, Piskel is no longer using the native canvas scale method but uses a custom scale implementation instead.

cf. ImageResizer : https://github.com/juliandescottes/piskel/blob/master/src/js/utils/ImageResizer.js#L35

cf. FrameRenderer : https://github.com/juliandescottes/piskel/blob/master/src/js/rendering/frame/FrameRenderer.js#L267

Leads to investigate :

• draw the grid separately from the main sprite canvas
• draw the grid only after a throttling delay

[juliandescottes]

In the end, simply using clearRect on the already rendered frame gives a good visual result and pretty good performances.

The grid can now be used at higher resolutions without any issue.

I uploaded a video showing the new performance on a 640x640 sprite: https://www.youtube.com/watch?v=Uu9Tz4UDCsg