<canvas id="myCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(100, 100, 200, 200);

context.strokeStyle = 'green';
context.strokeRect(150, 150, 100, 100);

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.beginPath();
context.arc(250, 250, 50, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();

context.beginPath();
context.arc(250, 250, 70, 0, 2 * Math.PI, false);
context.strokeStyle = 'purple';
context.stroke();