Nicholas Kyriakides Nicholas Kyriakides - 3 years ago 181
Javascript Question

HTML5 Canvas redraw cycle performance optimisations

I am building a CAD app that runs in a browser.

It's based on Paper.js, a very neat Canvas library that allows you to manipulate vectors.

Paper.js is more than great.
There is a plethora of features to use, it's creators are really helpful in answering questions/bug fixing and it's generally a very easy-to-use and professionaly maintained library. New features also come in at a good pace and it's easy to update to newer versions of the library.

The major issue I am having at the moment is redraw cycle performance.

The redraw algorithm is 'dumb' (in terms of clever hacks to improve performance) and thus inefficient and slow

The main problem is that rendering coordinates is dependent on a progressively slower redraw-cycle.

As points-to-draw accumulate, each redraw cycle becomes slower and slower.

The redraw algorithm is as simple as it gets:

  • clear the area

  • take all saved points (the current scene)

  • redraw all saved points.

The question

Are there any classroom examples of rendering optimizations in such cases - assuming I'd like to stop short of implementing a dirty-rectangles algorithm (drawing only areas that have changed).

E.G: I thought of rasterizing paths that are not directly selected and worked on, save their path data into LocalStorage and as soon as
the user clicks on them to manipulate them, to re-import back their
path data. That would minimize the memory usage on non-worked-on

Rasterizing,saving and reimporting is also a bottleneck. So this solution is less than optimal.

Edit: I've experimented with manual on-the-spot rasterization which works pretty good, I've posted an answer below.

I'd like to hear of more ideas like the one described above.

Answer Source

This can be done with rasterization in a process/technique similar to Bitmap Caching.

The issue with high-node count designs is that rendering them causes the rendering engine to groan. The browser has to traverse their nodes and blit those pixels on the canvas.

So here's a nice solution:

1. Render a bitmap but keep the original shape below, hidden

The solution is to replace the vectors with images,rasterizing them - only when rendering, but still keeping the original shape below it's image copy, in a hidden state only when inactive(not being currently manipulated).

On clicking the images - we remove them and toggle the visibility of the original shape. This way inactive shapes are rendered as images and active shapes are released from their bitmap representation and act as vectors, free to be manipulated around. When not active they just sit there invinsible with their Raster copy on top of them.

This allows the engine to keep the vector representation of the shapes but avoids rendering them as vectors - instead images that look similar to them are layered on top of them.

1000's of path commands are essentially replaced by a single image - but only when rendering - the original path actually exists as an object in the Scene Graph, or whatever type of DOM you are using

2. Rasterize in groups

The trick is to perform the rasterization in groups - group 10-15 shapes together and rasterize them as a single image. This keeps the raster count low. On clicking an image - we can release the whole group or just the item that was clicked on.

3. Attach click handlers on the group to reinstate the vector copy when reactivated

When rasterizing a group, we can simply attach a click handler on it, so when clicked we toggle bitmap with vector. Images do not behave the same as vectors when hit testing - images are squares by nature and cannot be assymetrically hit-tested. While a vector considers it's edges to be on it's path boundaries - an image considers it's boundaries to be it's whole bounding box. The solution is when clicking on the image to actually hit-test the click point with the vector path below the image - if it returns true then perform a release.

The rest are optimizations and making the whole thing smart - Currently I allow my users to press a button and perform this optimization to all the shapes on the canvas - Maybe this can be done in a more automatic/intuitive way.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download