Try it Yourself: Canvas Circles

Canvas Circles

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const ctx = document.getElementById('scene').getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.fillStyle = '#3b82f6';
ctx.fill();
ctx.strokeStyle = '#1e3a8a';
ctx.lineWidth = 3;
ctx.stroke();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const ctx = document.getElementById('scene').getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.fillStyle = '#3b82f6';
ctx.fill();
ctx.strokeStyle = '#1e3a8a';
ctx.lineWidth = 3;
ctx.stroke();
</script>

</body>
</html>