ImageBitmapFactories.createImageBitmap()

The createImageBitmap method accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.

Syntax

createImageBitmap(image).then(function(response) { ... });
createImageBitmap(image, sx, sy, sw, sh).then(function(response) { ... });

Parameters

image

An image source, which can be an <img>, <video>, or <canvas> element, a Blob, ImageData or CanvasRenderingContext2D object, or another ImageBitmap object.

sx

The x coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.

sy

The y coordinate of the reference point of the rectangle from which the ImageBitmap will be extracted.

sw

The width of the rectangle from which the ImageBitmap will be extracted. This value can be negative.

sh

The height of the rectangle from which the ImageBitmap will be extracted. This value can be negative.

Return value

A Promise which resolves to an ImageBitmap object containing bitmap data from the given rectangle.

Example

var canvas = document.getElementById('mycanvas'),
ctx = canvas.getContext('2d'),
image = new Image();

image.onload = function() {
  Promise.all([
    createImageBitmap(this, 0, 0, 32, 32),
    createImageBitmap(this, 32, 0, 32, 32)
  ]).then(function(sprites) {
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}

image.src = 'sprites.png';

Specifications

Browser compatibility

[1] Chrome only supports the interface with one argument. Other interfaces are available behind the "Experimental canvas features" flag.

See also

• CanvasRenderingContext2D.drawImage()
• ImageData