canvasIntro

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        canvas {
            /*border: 1px solid black;*/
        }
    </style>
</head>
<body>
    <canvas id="draw" width="640" height="480">
    </canvas>
    <script>
        let canvas = document.getElementById('draw');
        let ctx = canvas.getContext('2d');
        let width = 640;
        let height = 480;
        let size = 200;

        /*
        ctx.fillRect((width / 2 ) - ( size / 2), (height / 2 ) - ( size / 2), size, size);
        ctx.fillStyle = 'blue';
        ctx.fillRect((width / 2 ) - ( size / 2 /2), (height / 2 ) - ( size / 2 / 2), size/2, size/2);
        //ctx.fillStyle = 'rgb(0,150,0)';
        //ctx.fillRect(90,90,150,150);
        //ctx.fillStyle = 'rgba(150,0,0,0.5)';
        //ctx.clearRect(50,50,150,150);
        */

        let radius = 150;
        ctx.beginPath();
        ctx.moveTo((width / 2 ) + radius, (height / 2 ));
        // Math.PI / 180 * deg
        ctx.arc((width / 2 ), (height / 2 ), radius, 0, 2 * Math.PI );
        //ctx.fill();
        ctx.strokeStyle = 'red';
        ctx.stroke();


        //ctx.lineTo((width / 2 ) + size,(height / 2 ) + size);
        //ctx.lineTo(0,0);
        //ctx.lineTo(size,0);
        //ctx.stroke();
        //ctx.fillStyle = 'rgba(0,200,0,0.5)';
        //ctx.fill();
        //ctx.closePath();


    </script>

</body>
</html>