Comments on: HTML5′s canvas Part II: Pixel Manipulation

By: beej

beej — Fri, 02 Dec 2011 19:21:23 +0000

@brock I'm unaware of a way to get this low level data from the PNG, short of writing a PNG decoder in JS, and even then, my JS-fu isn't strong enough to know a way to get the binary data in JS. By the time the data gets exposed, it's already abstracted. :-/

By: brock

brock — Thu, 10 Nov 2011 18:24:15 +0000

@brock I meant "I can do it server side,..."

By: brock

brock — Thu, 10 Nov 2011 17:29:27 +0000

Is it possible to get the raw pixel value of an 8-bit indexed png, not the associated RGBA? I have images where the values (0-255) in the raw pixels have an actual data meaning. Depending on the time of year, the actual index palette changes, (so the displayed colors change) but not the 0-255 values in each pixel. I can do this client side, but with overhead which I don’t want.

What I want to do is a browser side calculation. So when a user mouses over an image, the x,y provides the pixel needed, and the 0-255 is extracted. This is then converted to a data value (using a know formula,) which can be displayed for the user (and of course, a coresponding lat long which can be determined since I know the outer lat/long bounds of the image)

By: beej

beej — Fri, 14 Oct 2011 16:42:17 +0000

@michael This is tricky for a couple reasons. (If it’s possible, given your needs, to read the pixel at x,y before the transform, it could be a lot better.)

First of all, the math isn’t hard, and there are a number of JS libraries to do it. (I’ve used Sylvester: http://sylvester.jcoglan.com/ ). Basically, you have to run the math again in parallel to get the result.

However, canvas will render to a subpixel. This means that part of your color could be on one pixel, and the rest would be on another. It might be a while pixel, originally, but it might turn to several gray pixels after rotation.

By: beej

beej — Fri, 14 Oct 2011 16:35:26 +0000

@OrNot getImageData() and putImageData() operate on a low level, referring to the pixels in the bitmap backing store, and are not affected by the drawing context. In the spec: "The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods."

By: michael

michael — Thu, 01 Sep 2011 04:35:03 +0000

I too have the same question as OrNot, although what I want to do is to read the pixel at (x,y) after a translate and rotation. Is this possible? perhaps there is a way to get the “real” coordinates of x and y after a translate and rotate has been done, and get the pixel at the “real” coordinates?

By: OrNot

OrNot — Sun, 17 Jul 2011 12:17:57 +0000

Nice article.

I have a question:

I modify your code as below:

c.translate(50,50);

// put pixel data on canvas
c.putImageData(imageData, 0, 0);

Why is the output image still in (0,0) not (50,50)?

By: Micah Smith

Micah Smith — Thu, 10 Feb 2011 15:03:54 +0000

Great article, and great writing style.

By: beej

beej — Sat, 17 Jul 2010 04:16:47 +0000

@Vidar If you’re going HTML5, you also have the option to rotate individual DOM elements (like images) in CSS3 with the “transform” property. (But of course, using canvas is an option, as well.)

As for collision detection, check out this fantastic page at Gamasutra:

http://www.gamasutra.com/view/feature/3383/simple_intersection_tests_for_games.php

Page 5 talks about “Oriented Bounded Boxes” which might be along the lines of what you need.

By: Vidar

Vidar — Sat, 17 Jul 2010 00:36:34 +0000

I'm making a javascript/html5/php/mysql online 2d strategy game. It will be posted at cyberempire.net. game site Don't mind the java stuff there, it was the plan to make it in java, but I thought I would try with javascript. My problem before was finding an easy way to rotate images, problem solved with canvas. But, I would appreciate it if anybody had a fast collision detection routine.