canvas -> bicycle

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #can1
        {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="can1" width="800" height="500">
    </canvas>

</body>
    <script>
        var ctx = document.getElementById('can1').getContext('2d');
        // first wheel
        ctx.beginPath();
        ctx.arc(150, 350, 100, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#90CAD7';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#317281';
        ctx.stroke();
        // rama
        ctx.beginPath();
        ctx.moveTo(150, 350);
        ctx.lineTo(300, 200);
        ctx.lineTo(550, 200);
        ctx.lineTo(350, 350);
        ctx.lineTo(150, 350);
        ctx.stroke();
        // second wheel
        ctx.beginPath();
        ctx.arc(570, 350, 100, 0, 2 * Math.PI, false);
        ctx.fill();
        ctx.stroke();
        // rudder
        ctx.beginPath();
        ctx.moveTo(570, 350);
        ctx.lineTo(540, 100);
        ctx.lineTo(460, 140);
        ctx.moveTo(540, 100);
        ctx.lineTo(580, 20);
        ctx.stroke();
        // treadle
        ctx.beginPath();
        ctx.arc(350, 350, 30, 0, 2 * Math.PI, false);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(300, 340);
        ctx.lineTo(320, 343);
        ctx.moveTo(400, 360);
        ctx.lineTo(380, 357);
        ctx.stroke();
        //seat
        ctx.beginPath();
        ctx.moveTo(350, 350);
        ctx.lineTo(275, 125);
        ctx.lineTo(225, 125);
        ctx.moveTo(275, 125);
        ctx.lineTo(325, 125);
        ctx.stroke();
    </script>
</html>