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
0
votes
0 answers

Restore background after sprite

I'm attempting to make a game, and I've got some sprites that will overlap each other. When clearing the sprite's area with clearRect, any sprite behind it will disappear as if the foreground sprite wasn't transparent. However, if I try to save and…
Edward
  • 495
  • 1
  • 6
  • 20
0
votes
0 answers

Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': The provided double value is non-finite

So I'm trying to do the following using Chrome on the local computer (not on a server). var timg = ctx1.getImageData(0,0,1920,1080); y=0; b=1; clickImgChange(); var clickImgChange = function() { y=y+a; b=b+1; …
Edward
  • 495
  • 1
  • 6
  • 20
0
votes
1 answer

javascript bug with canvas putImageData function inside for-loop

I was playing around with pixel-level manipulations on an HTML canvas and ran into a bug with the putImageData() function. Here's my code: var can = document.getElementById("canvasID"); var ctx = can.getContext("2d"); var picToAlter =…
GreenSonic98
  • 3
  • 2
0
votes
0 answers

Converting 3D color LUT to ImageData in javascript

I am working on a javascript app that reads 3D color lookup table in .cube format, parses data and creates ImageData object from these values and in the end, applies it to another image. I am having problems with converting 3D CLUT to imageData…
Josip Lukacevic
  • 300
  • 3
  • 8
0
votes
1 answer

imageData print wrong value

I need to manipulate pixels in an image and save integer values (0-255) in RGBA values. let imageData = this.context.getImageData(0, 0, this.width, this.height); imageData.data[1448] = 10; imageData.data[1449] = 20; imageData.data[1450] =…
Kevin Nascimento
  • 25
  • 6
0
votes
1 answer

Canvas Get Image Data returning 0 always

I am trying to invert the color of an image. Now the image loads ok, but when I try to call getImageData and putImageData back onto the canvas. The canvas is simply blank. Then I printed out all imageData, it appears like that it is always 0 for…
UniSound Waterloo
  • 531
  • 1
  • 7
  • 22
0
votes
0 answers

How to draw with putImageData to not rounded position with the same result as drawImage?

I have two visible canvases one which uses drawImage and another one where I copy pixels from a hidden (buffer) canvas. Except that everything is the same but when I move the object by some non-integer value the objects starts to stutter. I suspect…
Vico Lemp
  • 133
  • 12
0
votes
1 answer

javascript - canvas - putImageData doesn't always work

Having problems with restoring the background in a canvas. I have a canvas that changes size depending on what the options say (and it can get very big), I draw images all over it, and now I want an indicator to show where the mouse is in a grid…
Edward
  • 495
  • 1
  • 6
  • 20
0
votes
0 answers

bizzare putImageData action

Here is my code : var ctx = document.getElementById("map").getContext("2d"); var ZeroX = 0; var ZeroY = 0; ctx.beginPath(); ctx.fillRect(100, 200, 100, 50); //Drawed a black rectangle function moveMap(evt) { var key = evt.keyCode ||…
Theodor Bischler
  • 103
  • 12
0
votes
0 answers

ant't 'putImageData' with 'imagedata' from other canvas

I have two canvases on the same page, with different ids. I use the first canvas to draw Images and the second is like an album where you can see all of your paintings...... When I use var Img = painter.getImageData(0, 0, 100, 100) and…
Theodor Bischler
  • 103
  • 12
0
votes
1 answer

Why is there no reference on image data?

Yes, I know about .getImageData() I mean, let's say, I have to change some pixels: var imageData = ctx.getImageData(...); Seems, this method give me completely new copy of "real" (hiden somewhere deep from me) image-data. I say that, because if you…
Kurz
  • 393
  • 4
  • 13
0
votes
2 answers

Animating / Move canvas image that has been placed by putImageData

I have a jpeg image that has been decoded, and I am writing it to canvas with putImageData. Is it possible to then move this image around? I cannot find any documentation on it. The idea is that I will crop a certain part of the decoded image with…
bitten
  • 2,463
  • 2
  • 25
  • 44
0
votes
1 answer

how to replace getImageData & putImageData for better performance?

getImageData is very bad for performance. I do not have a png or jpg file. So I make an image while my program is loading. I am developing an Application using the iPhone retina display. And I need your help with this :( I need to make an Image at…
Guðni Már Gilbert
  • 155
  • 1
  • 11
0
votes
0 answers

drawing ImageData with rotation

I draw a lot of sectors on canvas (like a circle graph) and I need rotate it. Unfortunately it's to slow, so I tried to draw it only once and than save bitmap and draw the bitmap. I tried: v=ctx.getImageData(0, 0, 100, 100) ctx.rotate(Math.PI/2) …
knezi
  • 247
  • 1
  • 12
0
votes
2 answers

putImageData alpha lost

i spend a lot of time to change color of png file with transparent background. I know how set color in getImageData(ctx,0,0,100,100).data; but when i want save new PNG image i've got white background... i've got something like: var el =…
Frank
  • 3
  • 1
  • 3
1 2 3 4
5
6