6

I'm using the HTML5 canvas to load a single instance of an image which I then blit multiple times onto a single canvas. The image needs some slight pixel-based manipulation in order to customise it. My initial plan of attack had been to load the image, blit it to a backing canvas, draw my modifications on-top of it, and then grab the image data and cache it for future use.

Here's some code I've written to that effect:

context.drawImage(img, 0, 0);
context.fillStyle = '#ffffff';
context.fillRect(0, 0, 2, 2);  // Draw a 2x2 rectangle of white pixels on the top left of the image

imageData = context.getImageData(0, 0, img.width, img.height);
cusomImage = imageData;

While this works, I've noticed that my image (which is a transparent PNG) does not maintain transparency. Instead, when using putImageData to place it onto my front-facing canvas, it is rendered with a black background. How do I maintain transparency?

Any suggestions are welcome!

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
ndg
  • 2,585
  • 2
  • 33
  • 58
  • Why are you grabbing the image data for future use? You can just use the Canvas itself when you need to draw it: `newContext.drawImage(oldCanvas, 0, 0);` I think that would be faster and possibly use less memory. – andrewmu Mar 07 '11 at 15:11
  • Would that not mean that I have to draw each bitmap to its own individual canvas? I'm anticipating anywhere between 5 and 10 bitmaps. Surely that's less than optimal? – ndg Mar 07 '11 at 16:47

2 Answers2

5

putImageData() does not do what you might first expect: http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData() direct overrides the pixels of the canvas. So if you draw over something else on the same canvas it will not draw "over" it, it will instead replace the pixels of the canvas in the area with it's pixels.

I ran into this exact issue and finally found out why.

As for a solution, I haven't tried this yet but it seems promising: Why is putImageData so slow?

[EDIT]: I tested this method and it works fine for me, my data is now displaying transparency correctly.

Community
  • 1
  • 1
Ryan Badour
  • 584
  • 3
  • 14
0

The canvas is black after being created. Make it transparent first with:

context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, width, height);
Torsten Becker
  • 4,330
  • 2
  • 21
  • 22