Hacker News Reader

Comment by pickledcods | Hacker News Reader

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/jsFractalZoom/jsFractalZoom.ht...

It can easily handle 4K resolution.

View on HN

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);
  }

Reply on news.ycombinator.com