PutImageData gives black screen

Question

I have an array of pixel data that is passed from a webgl program. I then process the pixel data for green screening and output the result into a 2d canvas. Considering I am new with Canvas 2d my question is, how do I properly pass image data to the canvas.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var SetCanvas = function(data){
    var id = ctx.createImageData(window.innerWidth, window.innerHeight);
    id.data = data;
    ctx.putImageData(data, 0, 0);
};

If the canvas is empty, then any images made of it will be black... — Jack Bashford, Mar 27 '19 at 23:18
This is my first time using the 2d context of canvas, so what exactly does a canvas being empty mean? And how do I change that? — Argentum Manus, Mar 28 '19 at 00:55

score 0 · Accepted Answer · answered Mar 27 '19 at 23:51

data property of the ImageData object can't be set like that.

You need to set every values of this Uint8ClampedArray to the ones of your incoming data.

If data is an ArrayLike object and holds Uint8Clamped values, then you can use the set() method of TypedArrays.

var SetCanvas = function(data){
  var id = ctx.createImageData(window.innerWidth, window.innerHeight);
  id.data.set( data );
  ctx.putImageData(id, 0, 0);
};

But of course this assumes data holds correct data (that is 4 rgba Uint8 values per pixels, and with a length of innerWidth x innerHeight x 4).

Also, you were puting your input data instead of the ImageData id.

PutImageData gives black screen

1 Answers1