HTML and CSS Reference
8.4. Combining user input with video to build a telestrator
As we mentioned earlier, the telestrator allows the user to draw directly on a playing video
to illustrate the action to the television audience. To create this feature in your applica-
tion, you'll need a way to combine the video with other image data. For this you'll use the
<canvas> element. You should be familiar with Canvas from chapter 6 . In that chapter
you learned about the drawing capabilities of Canvas to create an interactive game. In
this chapter you'll concentrate on the general-purpose, image data-manipulation features to
combine images and other content with a video feed.
In this section, you'll learn
• How to use the <canvas> element to play a video
• How to create controls for video playback (because the <canvas> element
renders the video image data, not the <video> element)
• How to combine the video on the canvas with other content, such as images
• How to perform basic image-processing using the <canvas> element
• How to capture the user's drawings (telestrations) and add them to the video during
Your work on the telestrator will happen in three groups of steps:
Group 1: Playing video through a
Group 2: Manipulating video as it's
Group 3: Building the telestrator
• Step 1: Add a frame image
to the video.
• Step 2: Adjust how the
frame and video combine on
• Step 3: Adjust the opacity of
• Step 4: Grayscale the video
being played back.
• Step 1: Add the <canvas>
• Step 2: Grab and display
• Step 3: Add markup for and
implement video player
• Step 1: Capture mouse
• Step 2: Display the captured
path over the video.
• Step 3: Add a “clear” button
so users can remove
telestrations and start again.
Let's start with how to play video through the <canvas> element.