Confirmed users
591
edits
Evangelism/Firefox3.5/35Days/Articles/createImageData: Difference between revisions
Evangelism/Firefox3.5/35Days/Articles/createImageData (view source)
Revision as of 09:22, 3 June 2009
, 3 June 2009no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
''Work in progress'' | ''Work in progress'' | ||
== Canvas: Welcome into the matrix == | |||
The canvas element give you a way to draw bitmap data into a HTML page. | The canvas element give you a way to draw bitmap data into a HTML page. | ||
| Line 7: | Line 7: | ||
But something you may not know is that you have a direct access to the pixels values. | But something you may not know is that you have a direct access to the pixels values. | ||
=== The structure === | |||
A canvas is a matrix of pixels. | A canvas is a matrix of pixels. | ||
| Line 14: | Line 14: | ||
We will see later how to retrieve this object. | We will see later how to retrieve this object. | ||
canvasData { | canvasData { | ||
width: ''unsigned long'' // the width of the canvas, | width: ''unsigned long'' // the width of the canvas, | ||
height: ''unsigned long'' // the height of the canvas, | height: ''unsigned long'' // the height of the canvas, | ||
data: ''CanvasPixelArray'' // the values of the pixels | data: ''CanvasPixelArray'' // the values of the pixels | ||
} | } | ||
A pixel is a set of 4 values (\[0..255\]): red, green, blue, alpha. | A pixel is a set of 4 values (\[0..255\]): red, green, blue, alpha. | ||
| Line 29: | Line 29: | ||
That means if you want to know the blue value of the pixel ''x: 10, y: 20'', just do: | That means if you want to know the blue value of the pixel ''x: 10, y: 20'', just do: | ||
var | var g = canvasData.data[(y * width + x) * 4 + 2]; | ||
=== Pixel manipulation === | |||
There are 2 ways to retrieve this array: | There are 2 ways to retrieve this array: | ||
==== The values of the current canvas ==== | |||
You can play with current values of the canvas. If you've already drawn something on your canvas, you may want to modify it. | You can play with current values of the canvas. If you've already drawn something on your canvas, you may want to modify it. | ||
You can retrieve all the pixels, or a subpart of the canvas (as a rectangle). | You can retrieve all the pixels, or a subpart of the canvas (as a rectangle). | ||