Monday, October 7

Tag: Manipulating Pixels

Manipulating Pixels Using Canvas
CSS Tricks, Web Tricks

Manipulating Pixels Using Canvas

  Modern browsers support playing video via the <video> element. Most browsers also have access to webcams via the MediaDevices.getUserMedia() API. But even with those two things combined, we can’t really access and manipulate those pixels directly. Fortunately, browsers have a Canvas API that allows us to draw graphics using JavaScript. We can actually draw images to the <canvas> from the video itself, which gives us the ability to manipulate and play with those pixels. Everything you learn here about how to manipulate pixels will give you a foundation to work with images and videos of any kind or any source, not just canvas. Adding an image to canvas Before we start playing with video, let’s look at adding an image to canvas. <img id="SourceImage" src="ima...