Styjun

How to Flip Rotation from Positive to Negative?

Doubt about a particular point of view on how to do character creation

Is this statement about a motion being simple harmonic in nature strong?

Does using composite keys violate 2NF

Moscow SVO airport, how to avoid scam taxis without pre-booking?

German equivalent to "going down the rabbit hole"

Am I required to correct my opponent's assumptions about my morph creatures?

I was given someone else's visa, stamped in my passport

Using font to highlight a god's speech in dialogue

Can authors email you PDFs of their textbook for free?

What is the motivation behind designing a control stick that does not move?

Should a TA point out a professor's mistake while attending their lecture?

'spazieren' - walking in a silly and affected manner?

How can I improve my formal definitions?

Did NASA/JPL get "waning" and "waxing" backwards in this video?

How can I portray a character with no fear of death, without them sounding utterly bored?

Padding a column of lists

Why haven't the British protested Brexit as ardently as the Hong Kong protesters?

LINQ Extension methods MinBy and MaxBy

Break down the phrase "shitsurei shinakereba naranaindesu"

Sum and average calculator

Can you use Apple Care+ without any checks (bringing just MacBook)?

Does the telecom provider need physical access to the SIM card to clone it?

Which is the correct version of Mussorgsky's Pictures at an Exhibition?

PutImageData gives black screen

resize images with canvas - css overflow issueGet the size of the screen, current web page and browser windowSecurityException 1000, even though using same domainWebGL - reading pixel data from render bufferCan click event handlers in a Flash object react to click events delegated by JavaScript from another DOM element?accessing cache pictures phonegapCanvas toDataURI() on chrome security issueWhat is wrong with this method for counting non-white pixels in a canvas element?Canvas on resize - keep a maximal width or height without stretching/paddingmulty image render : webgl vs canvas2d

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

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

javascript canvas 2d putimagedata

share|improve this question

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If the canvas is empty, then any images made of it will be black...
  
  – Jack Bashford
  Mar 27 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 at 0:55
  

  
  
  
  

add a comment | 

1

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

javascript canvas 2d putimagedata

share|improve this question

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If the canvas is empty, then any images made of it will be black...
  
  – Jack Bashford
  Mar 27 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 at 0:55
  

  
  
  
  

add a comment | 

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

javascript canvas 2d putimagedata

share|improve this question

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

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

share|improve this question

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

share|improve this question

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

asked Mar 27 at 23:14

Argentum ManusArgentum Manus

3566 bronze badges

1 Answer
1

active

oldest

votes

0

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.

share|improve this answer

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much, this took me so long to finally get working
  
  – Argentum Manus
  Mar 28 at 1:03
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387891%2fputimagedata-gives-black-screen%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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.

share|improve this answer

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much, this took me so long to finally get working
  
  – Argentum Manus
  Mar 28 at 1:03
  

  
  
  
  

add a comment | 

0

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.

share|improve this answer

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much, this took me so long to finally get working
  
  – Argentum Manus
  Mar 28 at 1:03
  

  
  
  
  

add a comment | 

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.

share|improve this answer

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges

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

share|improve this answer

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges

answered Mar 27 at 23:51

KaiidoKaiido

52.6k44 gold badges7878 silver badges121121 bronze badges