HTML5 Video Player logo
HTML5 Video Player for Mac and Windows

HTML5 Canvas Video Demo

The canvas is a new element in HTML5, used to draw graphics, on the fly, via scripting (usually JavaScript). Old browsers do not support this new HTML5 element, new browsers, such as Internet Explorer 9, Firefox, Opera, Chrome, and Safari, support the canvas element.

A canvas is only a container for graphics with no border or content by default. It is a rectangular area on an HTML page, and it is specified with the canvas element. Such as bellow sample:

<canvas id="myCanvas" width="200" height="100"></canvas>

Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

You can combine the canvas element with HTML5 video element. Here we will showcase a special effect created by the canvas and video elements together. (This demo, click on the image to play, works better in modern browsers except IE).

HTML5 Canvas Video Demo

, ,