Join Joe Marini for an in-depth discussion in this video Manipulating raw pixels, part of Learning HTML Canvas.
- [Instructor] You might be wondering at this point…if it's possible to get access to the individual pixels…on the canvas so that they can be manipulated,…and the answer is yes, you can access the…individual pixel data as an array of bytes on the canvas.…This data can then be manipulated…and put back into the canvas.…The image data in a canvas is composed of four byte wide…pixels so each pixel represents color information.…There's red, green, and blue components of that pixel,…along with the global alpha setting…which controls the opacity.…
So by getting access directly to these bytes,…we can manipulate how the image looks in the canvas.…Now obviously this ability presents a security risk.…If any script could just get access to the image data…on a canvas, it could surreptitiously send it back…to another website or another web server.…So for security reasons, a script has to come…from the same origin as the page in order to…make use of this feature.…Otherwise, the script is denied access…and the browser raises a security exception.…
- Canvas examples
- Drawing shapes, arcs, paths, and curves
- Drawing text
- Drawing shadows, patterns, and gradients
- Using clipping paths
- Displaying images and video
- Transforming objects with scaling and rotation
- Manipulating raw pixels
- Applying transitions
- Creating animations
Skill Level Intermediate
1. Overview of Canvas
2. Basic Canvas Drawing Techniques
3. Complex Canvas Drawing
4. Advanced Drawing APIs
5. Practical Examples
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.