Canvas Direct Pixel Manipulation
In this blog I will talk about the HTML5 Canvas element and direct pixel manipulation. Since Internet Explorer 9 RC just released this is perfect timing. While canvas direct pixel manipulation was always possible, before RC the performance of it was not optimized. So let’s get started! To demonstrate the concept I have created a “poor mans” picture editor which allows manipulation of an image drawn in the context of the canvas. remove red, green, blue color channels from the entire picture remove the selected color convert a specific color to alpha (make it transparent) convert the entire picture to B&W Here’s how it looks (you may recognize this picture as the background for the FishIE sample): In my “Getting Started with Canvas” I explained how to draw images in the canvas context. The first step is to retrieve the ImageData object from the canvas: imgData = ctx.getImageData(0,0,WIDTH, HEIGHT); var pixels = imgData.data; Each color is an integer between 0 and 255. 1. 2. 4.
HTML 5
4.8.11 The canvas element Categories Flow content. Phrasing content. Embedded content. Contexts in which this element may be used: Where embedded content is expected. Content model: Transparent. Content attributes: Global attributes width height DOM interface: interface HTMLCanvasElement : HTMLElement { attribute unsigned long width; attribute unsigned long height; DOMString toDataURL([Optional] in DOMString type, [Variadic] in any args); Object getContext(in DOMString contextId); }; The canvas element represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. Authors should not use the canvas element in a document when a more suitable element is available. When authors use the canvas element, they should also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. The canvas element has two attributes to control the size of the coordinate space: width and height .
s Bit Bucket » HTML5′s canvas Part II: Pixel Manipulation
Your pixels will be manipulated. Your browser doesn't support HTML canvas. Get a modern browser such as Chrome, Firefox, Opera, or IE9. Otherwise, you'll just see images of canvases, below, instead of canvases. Admittedly, this isn't much of an issue for this particular demo, but you should upgrade, anyway. Create an array of empty pixels, or Get an array of pixels from an existing canvas, or Set the pixels of a canvas from a pixel array Pixel layout in the pixel array for a 3-by-2 image of 6 pixels. We'll get to a quick-and-easy calculation to find your way around the array in just a moment, but first, how does one create a pixel data array to be used on a canvas? HTML/JavaScript It's going to be useful later to know the width of the image data, and fortunately that's baked into the ImageData object: JavaScript imageData.width // width of the image data in pixels imageData.height // height of the image data in pixels imageData.data // pixel data array of (width*height*4) elements Oh, goat!
Pixel manipulation with canvas - MDN Docs
You can directly manipulate pixel data in canvases at the byte level using the ImageData object, which has three fields: width The width of the image in pixels; this is a read-only unsigned long. height The height of the image in pixels; this is a read-only unsigned long. data A CanvasPixelArray object containing the image data. The CanvasPixelArray object can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "RGBA" format). The CanvasPixelArray contains height x width x 4 bytes of data, with index values ranging from 0 to (height x width x 4)-1. For example, to read the blue component's value from the pixel at column 200, row 50 in the image, you would do the following: blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2]; You may access the size of the pixel array in bytes by reading the CanvasPixelArray.length attribute: var numBytes = imageData.data.length; Gecko 2.0 note
7 Lovely Things About HTML5 Markup
Article by Matt Doyle | Published on 12 July 2011 Categories: Discover 7 really nice ways that HTML5 can make your markup easier to write and more powerful. Covers doctypes, new elements and attributes, flexible linking, markup shortcuts, and more. HTML5 — the latest generation of the Web's markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation. In this article I'm going to focus on the markup language itself, and look at seven reasons why I love HTML5's markup more than HTML4's. Doctypes data- attributes Some new and improved elements and attributes More flexible linking Simpler markup, and Enhancements to web forms. Ready to upgrade your markup? A doctype you can actually remember An HTML4 doctype: The HTML5 doctype: For example:
