Webmasters Gallery

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.

Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.

Here are key things that occur during the main loop:

• first, the content of the video is injected in the main canvas. That’s why
  the canvas element looks like a video element;
• second, the position of the 2 brighter areas of the canvas are computed
  (you have access to all pixels values);
• third, the required transformation is computed (rotation, scale,
  translation);
• fourth, the content of the selected pattern is injected in the main canvas
  following the transformation.

A little drawing: