Stack Overflow
Stack Overflow

Questions tagged [putimagedata]

The putImageData() is a method of the HTML5 Canvas, and is used to place new image data onto an existing image.

The putImageData(imageData, dx, dy) method of the 2D API places the contents of the imageData array into the calling CanvasRenderingContext2D object at position (dx, dy).

An optional 'dirty rectangle' can be used to clip the imageData.

For more information, see MDN.

81 questions
3
votes
0 answers

putImageData same as drawImage

As Im drawing multiple objects in the same context layer I have stumbled across something. context.putImageData(imageData, x, y); This will overwrite everything in the area of this image data. Dose not mater if data is transparent of not. Unlike…
Jonas Lindahl
  • 752
  • 10
  • 24
2
votes
0 answers

javascript canvas how to "draw" to ImageData array

When drawing on canvas, I have been mostly using built in functions such as fillText, drawCircle, DrawRect... which draw directly to canvas. Are there any such functions, which, instead of drawing these shapes to canvas, "draw" (manipulate array is…
noob
  • 47
  • 6
2
votes
0 answers

D3.js performance issue, can scaleDivergingSymlog return RGB values instead of string?

I'm creating a diverging scale using D3.js with: scaleDiverging = d3.scaleDivergingSymlog(d3.interpolateBrBG) .domain([-0.1, 0, 0.1]) I can then call scaleDiverging(0.05) and I'll get back a value of 'rgb(87, 175, 165)'. This works great except…
at.
  • 50,922
  • 104
  • 292
  • 461
2
votes
0 answers

Avoiding two full copies to update a canvas from WebAssembly?

In JavaScript I can directly manipulate the pixels of a canvas and refresh them with a single copy: ctx = canvas.getContext('2d') imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) pixelTypedArray =…
hippietrail
  • 15,848
  • 18
  • 99
  • 158
2
votes
1 answer

Why does my canvas noise function always only appear red?

I'm trying to apply a noise effect to my canvas, based on a codepen I saw, which in turn appears to be very similar to an SO answer. I want to produce a "screen" of randomly transparent pixels, but instead of that I get a field that's completely…
Tom
  • 8,509
  • 7
  • 49
  • 78
2
votes
1 answer

Canvas effects such as filter or drop shadow not applied with context.putImageData

In a html canvas, I am trying to generate a drop shadow on an image with transparent pieces in it. This image is generated by code and then drawn to the canvas using: ctx.putImageData(dst, 0, 0) The problem is that the following code is not…
Emiel Vandenbussche
  • 363
  • 1
  • 5
  • 12
2
votes
1 answer

How can I set an HTML5 canvas ImageData from an XMLHttpRequest response?

I would like to use XMLHttpRequest to load a png file and then use the response to set the image data in a canvas object, thus totally eliminating the need for an Image object and having direct access to the ImageData. So far my code looks like…
Frank
  • 2,050
  • 6
  • 22
  • 40
2
votes
1 answer

HTML5 Canvas Scaling using getImageData and putImageData

Is there any way to scale the canvas using getImageData and putImageData.Below is the snippet of code. var c=document.getElementById("myCanvas"); var c2=document.getElementById("myCanvas2"); var ctx=c.getContext("2d"); …
Ajain Vivek
  • 1,111
  • 1
  • 12
  • 20
2
votes
1 answer

html5 canvas pixel manipulation and transformations

Since putImageData is unaffected by transformations, how do I manipulate pixels in an image then use transformations on the result? For example, I want to make the reds brighter in a picture then rotate the picture 36 degrees. Using putImageData…
Raptorious Rexotropolis
  • 86
  • 4
1
vote
0 answers

PDF loading is extremely slow for large files using pdf.js

I am facing huge performance issues in loading large pdf documents (around 30/40 MB) using pdf.js I am new to the ways it works and read a lot about it , but nothing helped. Following is my code samples. In HTML file
…
user1595214
  • 521
  • 3
  • 10
  • 22
1
vote
1 answer

Why is Javascript Canvas putImageData drawing a white image to screen?

I am trying to draw a gray gradient (or a few of them actually) to the canvas. To do this I am using the getImageData() and putImageData() methods of canvas. data is an Uint8ClampedArray with size 1000 * 1000 * 4. In the for loops the rgb color…
Teodor Dyakov
  • 344
  • 2
  • 13
1
vote
1 answer

JavaScript: canvas PutImageData not working?

I was working with imageData, and for some reason, it is only drawing half of the image! Here is my code. (There is a canvas element with an ID of canvas) function getWidth() { return Math.max( document.body.scrollWidth, …
Paradox
  • 133
  • 1
  • 11
1
vote
1 answer

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…
Argentum Manus
  • 45
  • 7
1
vote
0 answers

JS Canvas putImageData Rendered Color Difference

While manipulating pixels with JS Canvas putImageData there is a difference in required and rendered color. While drawing RGB(255,255,0) the out put on canvas is RGB(254,254,86) instead. Same is the case with other values. Where is the problem? Here…
Waqas Tariq
  • 84
  • 4
1
vote
1 answer

putimagedata drawing pixel data 4 times / not to scale

I've recently been watching some of Notch's streams on twitch and was interested in one of his rendering techniques for the Ludum Dare challenge a few years ago. I tried converting his java code to javascript and am running into some problems, and…
simon
  • 854
  • 1
  • 9
  • 23
1
2
3 4 5 6