OffscreenCanvas and worker threads

Note: your browser must support OffscreenCanvas.

This example has two canvases with incrementing counters.

Canvas A is being drawn to on the main thread. Canvas B uses an OffscreenCanvas so that we can draw to it in a worker thread. The purpose of this example is to show how a worker thread can keep the rest of our UI responsive.

The button below each canvas creates blocking work on either the main thread (Canvas A) or a worker thread (Canvas B). When a thread is blocked, incrementing the related counter from that thread is also blocked.

Canvas A

Canvas B

When the main thread is blocked, all UI elements are frozen.
The hover effect on buttons is also blocked:

When the worker thread is blocked, the main thread is free to do work such as the element hover effects and animations. Blocking the worker thread will still prevent Canvas B's counter from being updated, but the rest of the UI stays responsive while this is true.