canvas basic practice

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas {
            border: 1px solid #888;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script>
        var c = document.getElementById("mycanvas");
        var x = c.width;
        var y = c.height;
        var xc = x/2;
        var yc = y/2;
        var ctx = c.getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(10,10,100,100);
        ctx.fillStyle = "rgba(0,0,200,0.5)";
        ctx.fillRect(50,50,100,100);
        ctx.beginPath();
        ctx.fillStyle = "rgba(0,200,0,0.5)";
        ctx.arc(xc, yc, 200, 0, 2*Math.PI);
        ctx.fill();
        ctx.strokeStyle = "red";
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(100,250);
        ctx.lineTo(400,250);
        ctx.lineWidth = 10; //선 두께
        ctx.stroke();
        ctx.beginPath();
        ctx.strokeStyle = "pink";
        ctx.strokeRect(200,200,200,200);
        ctx.clearRect(0,0,x,y); //지우기

        //파이그리기
        ctx.beginPath();
        ctx.moveTo(xc,yc);
        ctx.fillStyle = "red";
        ctx.arc(xc,yc,200,0,0.5*Math.PI);
        ctx.moveTo(xc,yc);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(xc,yc);
        ctx.fillStyle = "green";
        ctx.arc(xc,yc,200,0.5*Math.PI,0.8*Math.PI);
        ctx.moveTo(xc,yc);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(xc,yc);
        ctx.fillStyle = "blue";
        ctx.arc(xc,yc,200,0.8*Math.PI,1.5*Math.PI);
        ctx.moveTo(xc,yc);
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(xc,yc);
        ctx.fillStyle = "yellow";
        ctx.arc(xc,yc,200,1.5*Math.PI,2*Math.PI);
        ctx.moveTo(xc,yc);
        ctx.fill();
    </script>
</body>
</html>