<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvasW = canvas.width;
canvasH = canvas.height;

//紫に塗りつぶした円を描画
ctx.beginPath();
ctx.moveTo(canvasW / 4, canvasH / 2);//なくても可
ctx.fillStyle = "purple";
ctx.arc(canvasW / 4, canvasH / 2, 50, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();

//赤く塗りつぶした円を描画
ctx.beginPath();
ctx.fillStyle = "red";
// ctx.moveTo(canvasW / 3, canvasH / 2);//なくても可
ctx.arc(canvasW / 3, canvasH / 2, 50, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();

//中心角45°の緑色に塗りつぶされた扇型の描画
ctx.beginPath();
ctx.fillStyle = "green";
ctx.moveTo(canvasW / 2, canvasH / 2);//必須
ctx.arc(canvasW / 2, canvasH / 2, 50, 0, Math.PI/4, false);
ctx.fill();
ctx.closePath();

//太さ10pxでピンク色の線の、塗り潰されていない円を描画
ctx.beginPath();
ctx.strokeStyle = "pink";
ctx.lineWidth = 10;
// ctx.moveTo(canvasW*3/4, canvasH / 2);//不要
ctx.arc(canvasW*3 / 4, canvasH / 2, 50, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();