11 ms·
Cool! It looks like you're doing most of your canvas-drawing with canvas draw commands? You might consider looking into WebGL rendering with regl: http://regl.p
by civilian 9y ago
Cool! It looks like you're doing most of your canvas-drawing with canvas draw commands? You might consider looking into WebGL rendering with regl: http://regl.party/ http://regl.party/ I've found it to be really powerful.
- HugoDaniel 9y agoThank you! Unfortunately my macbook is old and does not support WebGL. I am using a lot of WebWorkers for the rendering. The code is using a mix of SVG and Canvas. I don't know if I can explain it here in a comment. Roughly in the final passes I am preprocessing SVG paths into Path2D's[0] that then get rendered into an offscreen canvas. (they get cached) The rendering code keeps 4 offscreen canvases, one for the layers bellow the current layer, one for the current layer, one for the layers above the current layer, and finally one for the HUD (the grid lines and zoom info). These offscreen canvases are then rendered into many final canvases on the DOM in different ways (to do splitting animations, like row splitting or column splitting that happen to allow the UI to react to some specific user interactions like editing a grid element). This way the rendering is smooth with simultaneous users on the same project on my old hardware. I am planning to package this specific rendering part into npm and release it soon. [0] https://developer.mozilla.org/en-US/docs/Web/API/Path2D https://developer.mozilla.org/en-US/docs/Web/API/Path2D