5 ms·

For a high performance/responsive 2D canvas the best approach is with webworkers and ArrayBuffer, like I did for this project: https://rockingship.github.io/js

• pickledcods 5y ago
  The biggest performance hit that is educated everywhere is accessing pixels through getImageData() as bytes. In many cases it is way better to access it as a 32-bits RGBA value, like with: const rgba = new Uint32Array(getImageData(0, 0, width, height).data.buffer); rgba[y * width + x] = R | G << 8 | B << 16 | A << 24; And using Array.subarray as substitute for memcpy() for block copy: function memcpy(dst, dstOffset, src, srcOffset, length) { src = src.subarray(srcOffset, srcOffset + length); dst.set(src, dstOffset); }