<aside> 💡 Take the 1st pose picture once countdown1 is over

</aside>

Notes

Global variable image1 which will refer to our 1st pose picture

let canvas = document.getElementById('canvas');
var context1 = canvas.getContext('2d');
let image1;

function picture1() {
image1 = context.drawImage(video, 0, 0, 500, 500);
countdown2();
}

1. function picture1() is called from within function countdown1() once the countdown is over

2. In this function we want to take a picture of the user once the countdown is over i.e reaches 0

3. The <canvas> element is a container whichwill display images that are drawn into it

4. "The getContext() method returns an object that provides methods and properties for drawing on the canvas." (W3 schools)

5. So we use the getContext() method of canvas to get a 2d context, since we want to take a picture which is 2D (flat). And the reference to the object returned by getContext() is the variable context1

   

6. Then we draw the current video frame at the moment the countdown stops (at 0) by using the drawImage() image method of the context object (referenced by let context1)

7. The drawImage() method takes 5 parameters:

   Syntax: context.drawImage(img,x,y,width,height);

• What we want to draw on the canvas (image, video etc)
• The x co-ordinate of where the image should be drawn on the canvas
• The y co-ordinate of where the image should be drawn on the canvas
• The width of the image
• The height of the image

8. In our case we want to draw the current video stream once the countdown ends and we give the drawing a width and height of 500px X 500px which is the same width and height as the canvas element