CanvasRenderingContext2D.putImageData

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

Syntax

void ctx.putImageData(imagedata, dx, dy);
void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

Parameters

imageData

An ImageData object containing the array of pixel values.

dx

Horizontal position (x-coordinate) at which to place the image data in the destination canvas.

dy

Vertical position (y-coordinate) at which to place the image data in the destination canvas.

dirtyX Optional

Horizontal position (x-coordinate). The x coordinate of the top left hand corner of your Image data. Defaults to 0.

dirtyY Optional

Vertical position (y-coordinate). The y coordinate of the top left hand corner of your Image data. Defaults to 0.

dirtyWidth Optional

Width of the rectangle to be painted. Defaults to the width of the image data.

dirtyHeight Optional

Height of the rectangle to be painted. Defaults to the height of the image data.

Errors thrown

NotSupportedError

Thrown if either of the arguments are infinite.

InvalidStateError

Thrown if the ImageData object's data has been detached.

Examples

Understanding putImageData

To understand what this algorithm performs, here is an implementation on top of CanvasRenderingContext2D.fillRect(). For more information, see Pixel manipulation with canvas and the ImageData object.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function putImageData(ctx, imageData, dx, dy,
    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
  var data = imageData.data;
  var height = imageData.height;
  var width = imageData.width;
  dirtyX = dirtyX || 0;
  dirtyY = dirtyY || 0;
  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
  var limitBottom = Math.min(dirtyHeight, height);
  var limitRight = Math.min(dirtyWidth, width);
  for (var y = dirtyY; y < limitBottom; y++) {
    for (var x = dirtyX; x < limitRight; x++) {
      var pos = y * width + x;
      ctx.fillStyle = 'rgba(' + data[pos*4+0]
                        + ',' + data[pos*4+1]
                        + ',' + data[pos*4+2]
                        + ',' + (data[pos*4+3]/255) + ')';
      ctx.fillRect(x + dx, y + dy, 1, 1);
    }
  }
}

// Draw content onto the canvas
ctx.fillRect(0, 0, 100, 100);
// Create an ImageData object from it
var imagedata = ctx.getImageData(0, 0, 100, 100);
// use the putImageData function that illustrates how putImageData works
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);

Edit the code below and see your changes update live in the canvas:

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillRect(0,0,100,100);
var imagedata = ctx.getImageData(0,0,100,100);
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

function putImageData(ctx, imageData, dx, dy,
    dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
  var data = imageData.data;
  var height = imageData.height;
  var width = imageData.width;
  dirtyX = dirtyX || 0;
  dirtyY = dirtyY || 0;
  dirtyWidth = dirtyWidth !== undefined? dirtyWidth: width;
  dirtyHeight = dirtyHeight !== undefined? dirtyHeight: height;
  var limitBottom = dirtyY + dirtyHeight;
  var limitRight = dirtyX + dirtyWidth;
  for (var y = dirtyY; y < limitBottom; y++) {
    for (var x = dirtyX; x < limitRight; x++) {
      var pos = y * width + x;
      ctx.fillStyle = 'rgba(' + data[pos*4+0]
                        + ',' + data[pos*4+1]
                        + ',' + data[pos*4+2]
                        + ',' + (data[pos*4+3]/255) + ')';
      ctx.fillRect(x + dx, y + dy, 1, 1);
    }
  }
}

Specifications

Browser compatibility

Compatibility notes

• Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), non-finite values to any of these parameters cause the call to putImageData() to be silently ignored, rather than throwing an exception.
• To comply with the specification, starting with Gecko 16.0 (Firefox 16.0 / Thunderbird 16.0 / SeaMonkey 2.13), a call with an invalid number of arguments (only 3 or 7 arguments are valid), will now throw an error (bug 762657).

See also

• The interface defining it, CanvasRenderingContext2D.
• ImageData
• Pixel manipulation with canvas