HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas circle</title>
</head>
<body>
  <h1>Draw a circle</h1>
  <canvas id="c" width="300" height="300" style="border:1px solid #ccc"></canvas>
  <script>
    var ctx = document.getElementById('c').getContext('2d');
    ctx.beginPath();
    ctx.arc(150, 150, 60, 0, Math.PI * 2);
    ctx.fillStyle = '#3b82f6';
    ctx.fill();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML Canvas — Draw a Circle