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
1
vote
1 answer

putImageData on a loop

I'm trying to build a beautiful graphic image (animated!), calculating a color for each pixel on a screen and then showing all the pixels at once. So, I'm using a putImageData function on a loop. But for some reason it doesn't work. Only the last…
Roman Nastenko
  • 13
  • 4
1
vote
0 answers

Do I need all these statements to get the data array of an image in HTML5 canvas?

I am loading a pixel font file as a png image. I then use it to draw each character to canvas by writing to the buffer imageData.data clamped array and then using putImageData. Is there a simpler way to get the data array from the png image apart…
brisbob
  • 11
  • 3
1
vote
1 answer

Manually blending ImageData

I have a following task that I'm trying to accomplish the most efficient way possible: I have varying number of pictures of varying size as pixel arrays that I need to add to canvas pixel by pixel. Each pixel's value has to be added to canvas's…
Kilipukki
  • 311
  • 3
  • 16
1
vote
0 answers

putImageData crashes browser

The putImageData at the end of this code crashes the "Web" browser in Raspberry Pi. var plotCanvas = document.getElementById("plotCanvas"); var plotCanvasWidth = plotCanvas.offsetWidth; var plotCanvasHeight = plotCanvas.offsetHeight; …
Davide Andrea
  • 1,357
  • 2
  • 15
  • 39
1
vote
0 answers

javascript: creating a bigger image with canvas and html5 by reading pixel data

so I'm having some issues with my code here. Essentially I'm trying to take my image, and create a new image that is x times bigger than the original. I do this by copying r, g, b & a of every pixel and putting the information into a new picture…
Daniel Bengtsson
  • 113
  • 9
1
vote
1 answer

Build ImageData array from normal javascript array

I have a series of functions that builds a rgba sequence array, and I'm planning to apply this data to a canvas object. I'm not sure how to convert the rgba (already in 0-255 values) into a proper imageData object that I can use .putImageData…
Karric
  • 1,415
  • 2
  • 19
  • 32
1
vote
2 answers

How to set a property of a typed object while retaining it's type?

I have a specific case, but I'm also curious in general. I have a canvas, I get it's ImgData using createImageData, and I set it's data property to be something else, in order to then use PutImageData and pass it this modified ImgData. My PureScript…
PsyFish
  • 287
  • 1
  • 9
1
vote
1 answer

I'm having troubles with copying transparent pixels with canvas putImageData from another canvas/image(png)

I'm trying to copy method discribed here on stackoverflow. But I'm having some problems which I don't know how to solve. I set up jsfiddle to demonstrate everything. Here is the second jsfiddle with only particles moving and being drawn. My problem…
Vico Lemp
  • 133
  • 12
1
vote
2 answers

getImageData(), putImageData() not working on Nexus 4, using Cocoonjs canvas+

I'm writing a small demo program to test canvas+ performance. But getImageData(), putImageData() don't seem to work. It leaves a black square on the canvas. Half size in width and height, of course considering the window.devicePixelRatio is 2,…
spikeyang
  • 691
  • 9
  • 17
1
vote
1 answer

Image data fabric.js

I'm currently working with fabric.js and I succeeded to spherize part of an image after an onclick event. Problem is the canvas doesn't memorize my actions. When you click once, all is fine, the part spherize. But when you click another time,…
Julox
  • 35
  • 2
  • 5
1
vote
1 answer

Create HTML canvas from Ajax Arraybuffer response type

I am doing a Ajax call to Server for a Jpeg file. I have the data returned as Array buffer. Now how can I render this Array buffer on the canvas. Now please dont suggest any answer like setting the source url to the image. I want to hold the image…
Raj
  • 337
  • 1
  • 3
  • 13
1
vote
1 answer

HTML5 Canvas : Reproduce a picture with getImageData and putImageData

I've been trying for days to reproduce an image just using the Canvas API with getImageData and putImageData, following some tutorials I've found around on the web. It's simple to do with squares or whatever other forms drawn from the Canvas, but it…
Utopiad
  • 107
  • 2
  • 13
1
vote
1 answer

Trying to manipulate alpha on a canvas without get/putImageData?

Situation is basically draw several moving primitive shapes with a basic linear gradient so they overlap on a transparent blank canvas. Where they overlap the alpha channel value changes (ie, they bleed). Final stage is rounding the alpha for each…
Rycochet
  • 2,860
  • 1
  • 22
  • 39
1
vote
1 answer

Crop an image and then apply filter Kinetic

I am using Kinetic for some image processing. What happens is that I crop my image and then by clicking a button I want to make it black and white. For some reason the simple setFilter function is not working in this case, when you do crop first.…
novellino
  • 1,069
  • 4
  • 22
  • 51
1
vote
1 answer

Multiple calls to canvas.putImageData in HTML5

I'm building an application that makes a user-specified number of calls to canvas.putImageData in Javascript. Between each call to putImageData, the image data is modified. The time needed to modify the data varies between calls. The user also needs…
Neal Lawton
  • 113
  • 2
1 2
3
4 5 6