javascriptcanvas2dputimagedata

PutImageData gives black screen

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);
};
Solution

  • 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.