Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

504 CHAPTER 12 Drawing with HTML5

14. In the default.css file, set the border on the canvas as follows.
    canvas {
    border: 1px solid black;
    }


15. In the default.js file, add the document ready function. In the document ready func-
    tion, subscribe to the click event of the button. When the button is clicked, call a new
    function, drawVideoFrame. Your code should look like the following.
    $(document).ready(function () {
    $('#btnSnapshot').on('click', drawVideoFrame);
    });


16. Add the drawVideoFrame function. In this function, add code to get a reference to
    the canvas. Add code to get a reference to the video element. Add code to call the
    getContext method on the canvas and, using the context object, call the drawImage
    method with the video. Your code should look like the following.
    function drawVideoFrame() {
    var canvas = document.getElementById('myCanvas');
    var video = document.getElementById('myVideo');
    canvas.getContext('2d').drawImage(video, 0, 0, 360, 240);
    }


17. In Solution Explorer, right-click the CanvasPage.html file and choose Set As Start Page.


18. Test your work by pressing F5 to run the website. You should see the VideoPage.html
    page as shown in Figure 12-26.

FIGURE 12-26 he running canvas snapshooter pageT