So, I decided to create a programme in JavaScript to draw things with kinematics (and maybe other animations!) on the html canvas element! Let’s see how it turns out!

First things first, let’s create the canvas element using the following code:

This looks like this:

Hmmh, not quite what we want. Hang on that’s better:

This is the first JS file called, ‘main.js’, with canvas.width and height being set to 700 and 500 respectively, which looks like:

Now to draw first arm by creating an arm object and then creating it and drawing it in the main.js file:

This looks like this:

Again, not quite what we are looking for because the arm x and y are both 0 which means it is created in the top left corner of the canvas! An easy fix is to change the starting x and y values in the Arm object like so:

Here they are now half the canvas x and just under half the canvas y:

The next thing to do is to make it look better by adding bevel but we’ll leave that to another day!