Canvas -> arcs

<!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="400" height="500">
    </canvas>

</body>
    <script>
        var ctx = document.getElementById('can1').getContext('2d');
        // hat
        ctx.beginPath();
        ctx.arc(200, 350, 100, 0, Math.PI * 2, false);
        ctx.fillStyle = '#90CAD7';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#317281';
        ctx.stroke();

        // oval face
        ctx.save();
        ctx.scale(2.5, 1);
        ctx.beginPath();
        ctx.arc(80, 400, 15, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.restore();
        ctx.stroke();

        // nose
        ctx.beginPath();
        ctx.moveTo(200, 320);
        ctx.lineTo(170, 370);
        ctx.lineTo(200, 370);
        ctx.stroke();

        // eyes
        ctx.save();
        ctx.scale(2, 1);
        ctx.beginPath();
        ctx.arc(90, 310, 5, 0, 2 * Math.PI, false);
        ctx.restore();
        ctx.stroke();

        ctx.save();
        ctx.scale(2, 1);
        ctx.beginPath();
        ctx.arc(110, 310, 5, 0, 2 * Math.PI, false);
        ctx.restore();
        ctx.stroke();

        // hat
        ctx.save();
        ctx.scale(5, 1);
        ctx.beginPath();
        ctx.arc(40, 250, 20, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#396693';
        ctx.fill();
        ctx.restore();
        ctx.strokeStyle = '#25201C';
        ctx.stroke();

        ctx.save();
        ctx.scale(3, 1);
        ctx.beginPath();
        ctx.arc(65, 235, 20, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#396693';
        ctx.fill();
        ctx.restore();
        ctx.strokeStyle = '#25201C';
        ctx.stroke();

        //fil rectangle
        ctx.fillStyle = '#396693';
        ctx.fillRect(135, 135, 120, 100);

        //lines on hat
        ctx.beginPath();
        ctx.moveTo(135, 135);
        ctx.lineTo(135, 235);
        ctx.moveTo(255, 135);
        ctx.lineTo(255, 235);
        ctx.stroke();

        //top oval
        ctx.save();
        ctx.scale(3, 1);
        ctx.beginPath();
        ctx.arc(65, 135, 20, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#396693';
        ctx.fill();
        ctx.restore();
        ctx.strokeStyle = '#25201C';
        ctx.stroke();
    </script>
</html>