Investigate Offscreen Canvas Rendering

[etimberg]

Per https://twitter.com/ebidel/status/975788240463585281 Chrome and Firefox are introducing an OffscreenCanvas than can be rendered from a web worker.

We should investigate and see if Chart.js can use this. If so, might be a good advanced topic in the documentation

[Punit-Rathod]

I was wondering if there has been any progress on this? It would be great to be able to render charts in a web worker.

[piotr-cz]

I've managed to do it, however there are few problems:

• Chart.js expects Canvas which is an instance of HTMLElement.
  When you pass an OffscreenCanvas you'd have to add a proxy for some of it's methods and properties like getAttribute, setAttribute, classList, width, height, getBoundingClientRect, clientWidth and clientHeight.
• Legend doesn't work
• Events don't work

Example

let canvasElement = document.createElement('canvas')
canvasElement.width = 375
canvasElement.height = 200

if (canvasElement.transferControlToOffscreen) {
  const originalCanvasElement = canvasElement

  canvasElement = originalCanvasElement.transferControlToOffscreen()

  canvasElement.getAttribute = originalCanvasElement.getAttribute.bind(originalCanvasElement)
  canvasElement.setAttribute = originalCanvasElement.setAttribute.bind(originalCanvasElement)
  canvasElement.style = originalCanvasElement.style
  canvasElement.classList = originalCanvasElement.classList
  canvasElement.width = originalCanvasElement.width
  canvasElement.height = originalCanvasElement.height
  canvasElement.getBoundingClientRect = originalCanvasElement.getBoundingClientRect
  canvasElement.clientWidth = originalCanvasElement.clientWidth
  canvasElement.clientHeight = originalCanvasElement.clientHeight
}

new Chart(canvasElement)

More info: https://developers.google.com/web/updates/2018/08/offscreen-canvas#use_with_popular_libraries

[KasimJasarevic]

I've managed to do it, however there are few problems:

• Chart.js expects Canvas which is an instance of HTMLElement.
  When you pass an OffscreenCanvas you'd have to add a proxy for some of it's methods and properties like getAttribute, setAttribute, classList, width, height, getBoundingClientRect, clientWidth and clientHeight.
• Legend doesn't work
• Events don't work

Example

let canvasElement = document.createElement('canvas')
canvasElement.width = 375
canvasElement.height = 200

if (canvasElement.transferControlToOffscreen) {
  const originalCanvasElement = canvasElement

  canvasElement = originalCanvasElement.transferControlToOffscreen()

  canvasElement.getAttribute = originalCanvasElement.getAttribute.bind(originalCanvasElement)
  canvasElement.setAttribute = originalCanvasElement.setAttribute.bind(originalCanvasElement)
  canvasElement.style = originalCanvasElement.style
  canvasElement.classList = originalCanvasElement.classList
  canvasElement.width = originalCanvasElement.width
  canvasElement.height = originalCanvasElement.height
  canvasElement.getBoundingClientRect = originalCanvasElement.getBoundingClientRect
  canvasElement.clientWidth = originalCanvasElement.clientWidth
  canvasElement.clientHeight = originalCanvasElement.clientHeight
}

new Chart(canvasElement)

More info: https://developers.google.com/web/updates/2018/08/offscreen-canvas#use_with_popular_libraries

Add canvasElement.addEventListener = originalCanvasElement.addEventListener.bind(originalCanvasElement);

How I can use this with web worker because I want to update and re render existing chart in second thread

[etimberg]

Documentation on how to do this is available at https://www.chartjs.org/docs/master/general/performance#parallel-rendering-with-web-workers-chromium-only