Use-Cases of this video
- Know how to improve graphics performance of the canvas element.
- Know about the new APIs added to <canvas> as of late 2019.
Performance of the <canvas> element can be greatly improved using the newly introduced OffscreenCanvas. This can offload canvas logic and rendering to a background process rather on the main browser thread.
The <canvas> element allows graphics to be drawn on the screen. However all canvas logic, rendering and user actions happens on the main browser thread. Its performance impact may not be noticeable for tiny graphics logic and computation, but for a computational intensive page this results in a lowered user experience.
OffscreenCanvas brings a solution to this. Canvas logic and rendering can be performed as a background process (in a Web Worker). The control of the main canvas can be transferred to the OffscreenCanvas, and whatever happens on it will automatically rendered to the main canvas.
The below short video briefly gives an introduction to the new canvas features that have been included as of late 2019 — OffscreenCanvas and some new APIs involving drawing text on canvas.