Widely availableA strong fit for rendering-heavy apps, charts, and editors where drawing work would otherwise compete with UI responsiveness.
Canvas and graphics Widely available

Offscreen canvas

OffscreenCanvas moves rendering work away from the visible DOM canvas model. It is especially helpful when you want worker-based drawing and smoother main-thread interaction.

CanvasWorkerPerformance

Overview

OffscreenCanvas moves rendering work away from the visible DOM canvas model. It is especially helpful when you want worker-based drawing and smoother main-thread interaction.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
OffscreenCanvas
69
79
105
16.4
69
16.4
transferControlToOffscreen

The HTMLCanvasElement.transferControlToOffscreen() method transfers control to an OffscreenCanvas object, either on the main thread or on a worker.
69
79
105
16.4
69
16.4
convertToBlob

The OffscreenCanvas.convertToBlob() method creates a Blob object representing the image contained in the canvas.
69
79
105
16.4
69
16.4
convertToBlob (option type parameter webp)

`option.type` parameter supports `"image/webp"`
69
79
105
69
getContext

The OffscreenCanvas.getContext() method returns a drawing context for an offscreen canvas, or null if the context identifier is not supported, or the offscreen canvas has already been set to a different context mode.
69
79
105
16.4
69
16.4
getContext (2d context)

`2d` context
69
79
105
16.4
69
16.4
getContext (bitmaprenderer context)

`bitmaprenderer` context
76
79
105
16.4
76
16.4
getContext (webgl context)

`webgl` context
69
79
105
17
69
17
getContext (webgl2 context)

`webgl2` context
69
79
105
17
69
17
height

The height property returns and sets the height of an OffscreenCanvas object.
69
79
105
16.4
69
16.4
OffscreenCanvas

The OffscreenCanvas() constructor returns a newly instantiated OffscreenCanvas object.
69
79
105
16.4
69
16.4
transferToImageBitmap

The transferToImageBitmap() method of the OffscreenCanvas interface creates an ImageBitmap object from the most recently rendered image of the OffscreenCanvas. The image in the OffscreenCanvas is replaced with a new blank image for subsequent rendering.
69
79
105
16.4
69
16.4
width

The width property returns and sets the width of an OffscreenCanvas object.
69
79
105
16.4
69
16.4
OffscreenCanvasRenderingContext2D

The OffscreenCanvasRenderingContext2D interface is a CanvasRenderingContext2D rendering context for drawing to the bitmap of an OffscreenCanvas object. It is similar to the CanvasRenderingContext2D object, with the following differences:
69
79
105
16.4
69
16.4
arc

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.
69
79
105
16.4
69
16.4
arcTo

The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API adds a circular arc to the current sub-path, using the given control points and radius. The arc is automatically connected to the path's latest point with a straight line if necessary, for example if the starting point and control points are in a line.
69
79
105
16.4
69
16.4
beginPath

The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
69
79
105
16.4
69
16.4
bezierCurveTo

The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using CanvasRenderingContext2D.moveTo before creating the…
69
79
105
16.4
69
16.4
canvas

The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement object that is associated with a given context.
69
79
105
16.4
69
16.4
clearRect

The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API erases the pixels in a rectangular area by setting them to transparent black.
69
79
105
16.4
69
16.4
clip

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region.
69
79
105
16.4
69
16.4
closePath

The CanvasRenderingContext2D.closePath() method of the Canvas 2D API attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.
69
79
105
16.4
69
16.4
createImageData

The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
69
79
105
16.4
69
16.4
createLinearGradient

The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.
69
79
105
16.4
69
16.4
createPattern

The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition. This method returns a CanvasPattern.
69
79
105
16.4
69
16.4
createRadialGradient

The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.
69
79
105
16.4
69
16.4
direction

The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used to draw text.
69
79
105
16.4
69
16.4
drawImage

The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an image onto the canvas.
69
79
105
16.4
69
16.4
ellipse

The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an elliptical arc to the current sub-path.
69
79
105
16.4
69
16.4
fill

The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path with the current CanvasRenderingContext2D.fillStyle.
69
79
105
16.4
69
16.4
fillRect

The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current CanvasRenderingContext2D.fillStyle.
69
79
105
16.4
69
16.4
fillStyle

The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes. The default style is black.
69
79
105
16.4
69
16.4
fillText

The CanvasRenderingContext2D method fillText(), part of the Canvas 2D API, draws a text string at the specified coordinates, filling the string's characters with the current CanvasRenderingContext2D.fillStyle. An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a…
69
79
105
16.4
69
16.4
filter

The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.
69
79
116
69
font

The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
69
79
105
18.4
69
18.4
fontKerning

The CanvasRenderingContext2D.fontKerning property of the Canvas API specifies how font kerning information is used.
99
99
105
99
fontStretch

The CanvasRenderingContext2D.fontStretch property of the Canvas API specifies how the font may be expanded or condensed when drawing text.
99
99
117
99
fontVariantCaps

The CanvasRenderingContext2D.fontVariantCaps property of the Canvas API specifies an alternative capitalization of the rendered text.
99
99
117
99
getImageData

The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
69
79
105
16.4
69
16.4
getLineDash

The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.
69
79
105
16.4
69
16.4
getTransform

The CanvasRenderingContext2D.getTransform() method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.
80
80
105
16.4
80
16.4
globalAlpha

The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
69
79
105
16.4
69
16.4
globalCompositeOperation

The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes.
69
79
105
16.4
69
16.4
imageSmoothingEnabled

The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.
69
79
105
16.4
69
16.4
imageSmoothingQuality

The imageSmoothingQuality property of the CanvasRenderingContext2D interface, part of the Canvas API, lets you set the quality of image smoothing.
69
79
16.4
69
16.4
isPointInPath

The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point is contained in the current path.
69
79
105
16.4
69
16.4
isPointInStroke

The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or not the specified point is inside the area contained by the stroking of a path.
69
79
105
16.4
69
16.4
letterSpacing

The CanvasRenderingContext2D.letterSpacing property of the Canvas API specifies the spacing between letters when drawing text.
99
99
115
18.4
99
18.4
lineCap

The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines the shape used to draw the end points of lines.
69
79
105
16.4
69
16.4
lineDashOffset

The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or "phase."
69
79
105
16.4
69
16.4
lineJoin

The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet.
69
79
105
16.4
69
16.4
lineTo

The CanvasRenderingContext2D method lineTo(), part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
69
79
105
16.4
69
16.4
lineWidth

The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines.
69
79
105
16.4
69
16.4
measureText

The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width, for example).
69
79
105
16.4
69
16.4
miterLimit

The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio.
69
79
105
16.4
69
16.4
moveTo

The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y) coordinates.
69
79
105
16.4
69
16.4
putImageData

The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.
69
79
105
16.4
69
16.4
quadraticCurveTo

The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using CanvasRenderingContext2D.moveTo before creating…
69
79
105
16.4
69
16.4
rect

The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.
69
79
105
16.4
69
16.4
resetTransform

The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform to the identity matrix.
69
79
105
16.4
69
16.4
restore

The CanvasRenderingContext2D.restore() method of the Canvas 2D API restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.
69
79
105
16.4
69
16.4
rotate

The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.
69
79
105
16.4
69
16.4
save

The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.
69
79
105
16.4
69
16.4
scale

The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or vertically.
69
79
105
16.4
69
16.4
setLineDash

The setLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface sets the line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.
69
79
105
16.4
69
16.4
setTransform

The CanvasRenderingContext2D.setTransform() method of the Canvas 2D API resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.
69
79
105
16.4
69
16.4
shadowBlur

The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the amount of blur applied to shadows. The default is 0 (no blur).
69
79
105
16.4
69
16.4
shadowColor

The CanvasRenderingContext2D.shadowColor property of the Canvas 2D API specifies the color of shadows.
69
79
105
16.4
69
16.4
shadowOffsetX

The CanvasRenderingContext2D.shadowOffsetX property of the Canvas 2D API specifies the distance that shadows will be offset horizontally.
69
79
105
16.4
69
16.4
shadowOffsetY

The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.
69
79
105
16.4
69
16.4
stroke

The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given path with the current stroke style.
69
79
105
16.4
69
16.4
strokeRect

The CanvasRenderingContext2D.strokeRect() method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to the current CanvasRenderingContext2D.strokeStyle and other context settings.
69
79
105
16.4
69
16.4
strokeStyle

The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is black.
69
79
105
16.4
69
16.4
strokeText

The CanvasRenderingContext2D method strokeText(), part of the Canvas 2D API, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
69
79
105
16.4
69
16.4
textAlign

The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment used when drawing text.
69
79
105
16.4
69
16.4
textBaseline

The CanvasRenderingContext2D.textBaseline property of the Canvas 2D API specifies the current text baseline used when drawing text.
69
79
105
16.4
69
16.4
textRendering

The CanvasRenderingContext2D.textRendering property of the Canvas API provides information to the rendering engine about what to optimize for when rendering text.
99
99
116
99
transform

The CanvasRenderingContext2D.transform() method of the Canvas 2D API multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.
69
79
105
16.4
69
16.4
translate

The CanvasRenderingContext2D.translate() method of the Canvas 2D API adds a translation transformation to the current matrix.
69
79
105
16.4
69
16.4
wordSpacing

The CanvasRenderingContext2D.wordSpacing property of the Canvas API specifies the spacing between words when drawing text.
99
99
115
18.4
99
18.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: toBlob (105)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18.4)
Implementation note
  • The `font-weight` can be set, but is not reflected back (see bug 284115).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18.4)
Implementation note
  • The `font-weight` can be set, but is not reflected back (see bug 284115).

Syntax

JAVASCRIPT 
const offscreen = new OffscreenCanvas(256, 256);
const ctx = offscreen.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 256, 256);
const bitmap = offscreen.transferToImageBitmap();

Live demo

Offscreen drawing

Draw to an OffscreenCanvas and copy the result into a visible canvas.

PreviewFullscreen

Generated badge

Use an offscreen surface to generate a reusable badge before presenting it.

PreviewFullscreen

Repeated frame source

Redraw a visible chart from an offscreen scene on a timer.

PreviewFullscreen

Use cases

  • Worker-based rendering

    Run expensive drawing logic in a worker so pointer input and layout updates stay responsive.

  • Heavy data visuals

    Use OffscreenCanvas for graphs or map-like surfaces that redraw frequently and would benefit from main-thread relief.

Cautions

  • The API changes how rendering state and data move between threads, so structure message passing intentionally.
  • Not every canvas workflow needs worker rendering; keep the implementation simpler if main-thread drawing is already fast enough.

Accessibility

  • Canvas output still needs text alternatives or redundant representations when the visual is meaningful.
  • Performance improvements help accessibility, but they do not replace semantic structure for the information being shown.

Related links

Powered by web-features