Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
From the author of Video and Canvas

Video and Canvas

Another one of the most talked-about features of HTML5 is the canvas element and the JavaScript API that comes with it. The canvas element basically defines an area on a web page that you can draw on using its JavaScript API. As well as being able to draw lines and shapes, it is also possible to draw images on a canvas and even to manipulate the image’s pixels.

A video can be considered to contain images, which of course then means that you can draw them on a canvas element and subsequently manipulate the images pixels, should you wish to. Using this method, it is possible to duplicate a video as it's playing and drawing it in a canvas element using the JavaScript API. In addition, because you can also manipulate the pixels, it is possible to convert the image into a black and white image, or even to remove the pixels of a certain color, thus creating an opaque video, so you can place it on any background that you like.

Of course, these are just small examples of how an HTML5 video and canvas can interact, but it shows you how these things can work together to help you achieve more than before.

  • + Share This
  • 🔖 Save To Your Account