Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <canvas id="canvas" width="500" height="400" style="border: 1px solid black"></canvas>
        <script>
            var canvas = document.querySelector("#canvas");
            var ctx = canvas.getContext("2d");

            ctx.translate(200,200);
            ctx.arc(0, 0, 50, 0, 2 * Math.PI);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, 2, 0, 2 * Math.PI);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -40);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0, -40);
            ctx.lineTo(-5, -35);
            ctx.moveTo(0, -40);
            ctx.lineTo(5, -35);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0, -55);
            ctx.lineTo(0, -45);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(0, 55);
            ctx.lineTo(0, 45);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(55, 0);
            ctx.lineTo(45, 0);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(-55, 0);
            ctx.lineTo(-45, 0);
            ctx.stroke();
        </script>
    </body>
</html>