Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>shapes</title>
        <script type="text/javascript" charset="utf-8">
            function shapes(){

                // Get the canvas element
                var canvas = document.getElementById('canvas');
                // Set the context
                var canvas = canvas.getContext('2d');

                // triangle
                // beginPath();
                canvas.beginPath();
                // moveTo(x,y);
                canvas.moveTo(25,25);
                // lineTo(x,y);
                canvas.lineTo(125,25);
                canvas.lineTo(25,125);

                // square
                // fillRect(x,y width, height)
                canvas.fillRect(200, 25, 100, 100);

                // rectangle
                canvas.fillRect(400, 25, 100, 150);

                // circle
                // arc(x,y,radius, startAngle, engAngle, anticlickwise)
                canvas.moveTo(650, 100);
                canvas.arc(600, 100, 50, 0, Math.PI*2, true);

                // By default closed paths are filled
                canvas.fill();


            }
        </script>
    </head>
    <body id="shapes" onload="shapes();">
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
</html>