HTML and CSS Reference
In-Depth Information
Figure 5-5. Using scaling, different sizes of the single video instance are drawn on the canvas in Firefox
Generate preview
Next, create a function to generate the preview and set the JavaScript variables for the
video
and
canvas
elements:
<script>
function generatePreview(){
var video = document.getElementById('origVideo');
var canvas1 = document.getElementById('previewMed');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('previewsSm');
var context2 = canvas2.getContext('2d');
Note that the variables to specify the 2D context for each
canvas
drawing state are also
declared.
