Copy a 2-dimensional pixel array to a Javascript canvas

Question

Using the Javascript canvas element, is it possible to copy a 2-dimensional array of RGB values to a canvas?

<html>
<body>
<canvas id="canvas" height="200" width="200"></canvas>
<script type = "text/javascript">

//copy the following array to the canvas:
var arr1 = [
[[255, 255, 255],[200, 200, 0],[200, 200, 200]],
[[200, 0, 0],[200, 200, 0],[200, 200, 0]],
[[200, 200, 0],[200, 0, 0],[200, 200, 0]]
]

<script>
</body>
</html>

I found a relevant example: jsfiddle.net/Z6CHB/1 Now I just need to modify it so that it will copy an array to the canvas. — Anderson Green
– Anderson Green, Commented Dec 11, 2012 at 18:38
The inverse of this would be getting the pixels from the canvas: stackoverflow.com/questions/6727090/… — Anderson Green
– Anderson Green, Commented Dec 14, 2012 at 6:51

pimvdb · Accepted Answer · 2012-12-17 07:37:17Z

4

You can use getImageData/putImageData. Just calculate the right index (it's RGBA values in one big array): http://jsfiddle.net/zjypd/ (the jsFiddle has an enlarged canvas to show the pixels).

var arr1 = [
    [[255, 255, 255],[200, 200, 0],[]],
    [[200, 0, 0],[200, 200, 0],[200, 200, 0]],
    [[200, 200, 0],[200, 0, 0],[200, 200, 0]]
];

var ctx = document.querySelector("canvas").getContext("2d");

var height = arr1.length;
var width = arr1[0].length;

var h = ctx.canvas.height;
var w = ctx.canvas.width;

var imgData = ctx.getImageData(0, 0, w, h);
var data = imgData.data;  // the array of RGBA values

for(var i = 0; i < height; i++) {
    for(var j = 0; j < width; j++) {
        var s = 4 * i * w + 4 * j;  // calculate the index in the array
        var x = arr1[i][j];  // the RGB values
        data[s] = x[0];
        data[s + 1] = x[1];
        data[s + 2] = x[2];
        data[s + 3] = 255;  // fully opaque
    }
}

ctx.putImageData(imgData, 0, 0);

edited Dec 17, 2012 at 7:37

answered Dec 11, 2012 at 18:40

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Anderson Green Over a year ago

One of the arrays in my example was empty - sorry for the typo! (The empty array should be [200, 200, 200]).

Anderson Green Over a year ago

To change the array scale (in this example), you only need to change the pixel value in the css section. :)

pimvdb Over a year ago

@AndersonGreen: I just realized you can better use (0, 0, w, h) instead of the hardcoded (0, 0, 3, 3) for the arguments of getImageData.

Anderson Green Over a year ago

It's also possible to resize the canvas so that it matches the dimensions of the array: stackoverflow.com/a/331462/975097

Anderson Green Over a year ago

Here's my first attempt at getting the array to resize automatically. I'm still not sure whether it's working correctly. jsfiddle.net/zjypd/4

|

Collectives™ on Stack Overflow

Copy a 2-dimensional pixel array to a Javascript canvas

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related