/

HTML / CSS / JavaScript Tutorial

JavaScript canvas2d object method: putImageData()

[this page | pdf | back links]

The putImageData() method of the JavaScript DOM object returned by the getContext("2d") method applied to the HTML <canvas> element puts image data included in an ImageData object onto the canvas.

 

It has the following syntax with the following parameters.

 

context.putImageData(ximgData, x, y, drawnx,drawny, drawnwidth, drawnheight)

 

Parameter

Required / Optional

Description

imgData

Required

ImageData object to be inserted back onto canvas

x

Required

x-coordinate of upper-left corner of ImageData object

y

Required

y-coordinate of upper-left corner of ImageData object

drawnx

Optional

x-coordinate of upper-left corner of rectangle drawn onto canvas

drawny

Optional

x-coordinate of upper-left corner of rectangle drawn onto canvas

drawnwidth

Optional

Width of rectangle, in pixels, drawn onto canvas

drawnheight

Optional

Height of rectangle, in pixels, drawn onto canvas

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<span id="element"></span>


<script>
var x2 = document.createElement("CANVAS");
x2.setAttribute("width", "200");
x2.setAttribute("height", "60");
x2.setAttribute("style", "border: 1px solid black");
var c2 = x2.getContext("2d");

var imgData = c2.createImageData(100,20)
for (var i = 0; i<imgData.data.length; i += 4) {
  imgData.data[i+0] = 255; //red channel
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255; 
}
c2.putImageData(imgData,60,20);

c2.strokeStyle = "rgba(0,0,255,40)"; //so partly transparent
c2.rect(30, 10, 100, 40);
c2.stroke();

document.getElementById("element").appendChild(x2);
</script>

</body>
</html>

FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodCanvas2dPutImageData() {
  var x = document.createElement("CANVAS"); var c = x.getContext("2d"); return !!c.putImageData;
}


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile