Chapter 3. Working with Images and Videos

In this chapter, we will cover:

  • Drawing an image
  • Cropping an image
  • Copying and pasting sections of the canvas
  • Working with video
  • Getting image data
  • Introduction to pixel manipulation: inverting image colors
  • Inverting video colors
  • Converting image colors to grayscale
  • Converting a canvas drawing into a data URL
  • Saving a canvas drawing as an image
  • Loading the canvas with a data URL
  • Creating a pixelated image focus

Introduction

This chapter focuses on yet another very exciting topic of the HTML5 canvas, images and videos. Along with providing basic functionality for positioning, sizing, and cropping images and videos, the HTML5 canvas API also allows us to access and modify the color and transparency of each pixel for both ...

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.