Widely available Most useful in specialized rendering and media pipelines. Skip it if a normal 2D or WebGL context already meets the need.

ImageBitmapRenderingContext

Note: This feature is available in Web Workers.

The ImageBitmapRenderingContext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given ImageBitmap. Its context id (the first argument to HTMLCanvasElement.getContext() or OffscreenCanvas.getContext()) is "bitmaprenderer".

This interface is available in both the window and the worker context.

CanvasImageBitmapPerformance

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
ImageBitmapRenderingContext
66
79
46
11.1
66
11.3
getContext (bitmaprenderer context)

`bitmaprenderer` context
66
79
46
11.1
66
11.3
getContext (bitmaprenderer context options alpha parameter)

`options.alpha` parameter
66
79
11.1
66
11.3
canvas

The ImageBitmapRenderingContext.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement or OffscreenCanvas object that is associated with the given context.
66
79
97
11.1
66
11.3
transferFromImageBitmap

The ImageBitmapRenderingContext.transferFromImageBitmap() method displays the given ImageBitmap in the canvas associated with this rendering context. The ownership of the ImageBitmap is transferred to the canvas as well.
66
79
50
11.1
66
11.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (52)
Implementation note
  • Previously available under a different name: transferImageBitmap (46)

Syntax

JAVASCRIPT 
const ctx = canvas.getContext('bitmaprenderer');
const response = await fetch('image.png');
const blob = await response.blob();
const bitmap = await createImageBitmap(blob);
ctx.transferFromImageBitmap(bitmap);

Live demo

Bitmap renderer preview

Transfer an ImageBitmap into a canvas that uses the bitmaprenderer context.

PreviewFullscreen

Swap bitmaps

Create new bitmaps on demand and replace the currently displayed frame.

PreviewFullscreen

Bitmap status card

Report support state and keep a visible bitmap preview in sync.

PreviewFullscreen

Use cases

  • Frame transfer pipelines

    Move decoded or worker-produced bitmap frames into a visible canvas with minimal extra processing.

  • Rendering optimization

    Use it when ImageBitmap is already part of the workflow and presentation speed matters.

Cautions

  • This API is narrower than the 2D context, so adopt it only when the surrounding rendering pipeline actually benefits.
  • Performance gains depend on where the bitmap comes from and how often frames update.

Accessibility

  • As with any canvas-based output, provide text alternatives when the visual content conveys essential meaning.
  • Do not hide critical status or instructions inside bitmap-only rendering.

Related links