Advanced TypeScript Programming Projects

Drawing the key points on the canvas

Whenever we detect a pose, we receive a number of key points back with it. Each key point is made up of a position (the x and y coordinates), the score (or confidence), and the actual part that the key point represents. We want to loop over the points and draw them on the canvas.

As always, let's start off with our class definition:

export class DrawPose {}

We only need to get the canvas element once as it's not going to change. This indicates that we could pass this as our canvas and, because we are interested in the two-dimensional element of the canvas, we can extract the drawing context directly from the canvas. With this context, we clear off any previously drawn elements on the canvas and set a ...