2

When drawing on canvas, I have been mostly using built in functions such as fillText, drawCircle, DrawRect... which draw directly to canvas. Are there any such functions, which, instead of drawing these shapes to canvas, "draw" (manipulate array is probably a better word) them directly into imageData array, so that you can then put it onto canvas with putImageData only once, when all those shapes are "drawn" to an array?

Thank you.

noob
  • 47
  • 6
  • There are no standard built-in APIs for that, no. You can write your own of course. – Pointy Aug 05 '20 at 12:07
  • I thought so, since I couldn't find any. But while writing your own function for drawing a straight line is simple, writing one for drawing text is time consuming. Did someone write some kind of library for this? – noob Aug 05 '20 at 12:18
  • 1
    Well you can always draw onto a `` and fetch the image data from it. – Pointy Aug 05 '20 at 12:19
  • 1
    The 2D API uses the GPU if possible to render to the canvas, without the hardware support rendering is very slow, and would be even slower if written in JS. Also the 2D API is very a sophisticated rendering pipeline and would take 1000's of lines of code to duplicate, a pointless effort apart from learning what is involved. – Blindman67 Aug 05 '20 at 12:27
  • Yeah, I know it's too much to write it myself. The reason is speed. By writing directly to array and then drawing the image to canvas only once per animation frame is much faster than drawing each shape to canvas one by one. – noob Aug 05 '20 at 12:36
  • (In majority of devices) GPU/CPU RAM are separated Moving content of a buffer from CPU RAM to GPU RAM is much more than a simple copy. It is managed by the device driver (bottom software layer), then OpenGL (another layer) and the JS context memory management. in many cases, a special hardware state that can lock out all OS processes from RAM. Moving pixels from CPU to GPU is snail pace SLOWWWW and should be avoided at all costs. PLUS JS is terrible (I mean really really bad) at array access. Even with WASM you will not beat the native 2D API. Want speed use WebGL – Blindman67 Aug 05 '20 at 15:00
  • Perhaps drawing to SVG would be a better option? D3 has great support for this. You can then use animate or animateTransform modified in JavaScript. – 4thex Sep 03 '20 at 22:14

0 Answers0