v149 · clipboard · canvas

Drawing Tool Copy

A mini canvas drawing tool with two copy buttons: Eager Copy renders the canvas to PNG immediately at copy time; Deferred Copy uses ClipboardItem.delayed() to defer the render until you actually paste. The metrics panel counts renders avoided.

Color:
Width:
Copy controls
Then paste below (Ctrl/Cmd+V):
click here, then paste
Render metrics
Copies made0
Eager renders0
Deferred renders0
Renders avoided0
Deferred supportedchecking…
// Eager copy: PNG is rendered NOW even if user never pastes
async function eagerCopy(canvas) {
  const blob = await canvasToBlob(canvas);  // runs immediately
  await navigator.clipboard.write([
    new ClipboardItem({ 'image/png': blob }),
  ]);
}

// Deferred copy: PNG rendered ONLY when user pastes
async function deferredCopy(canvas) {
  await navigator.clipboard.write([
    new ClipboardItem({
      'image/png': ClipboardItem.delayed(async () => {
        return canvasToBlob(canvas);  // runs on paste, not on copy
      }),
    }),
  ]);
}

see also