HTML5 Game - Making arcs and circles

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Circle

Description

Making arcs and circles

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <script type = "text/javascript">
  function draw(){//from  w ww .ja  v a  2s  . c  o m
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");
   
    con.strokeStyle = "green";
    con.fillStyle = "rgba(255,0,0,0.5)";
    con.lineWidth = "5";
    
    //half-circle stroked
    con.beginPath();
    con.arc(220, 140, 50, 0, Math.PI, false);
    con.closePath();
    con.stroke();

    //full circle filled
    con.beginPath();
    con.arc(220, 220, 50, 0, Math.PI*2, true);
    con.closePath();
    con.fill();
  
    //another circle just for testing
    con.strokeStyle = "red";
    con.beginPath();
    con.arc(100, 100, 50, Math.PI / 2, Math.PI, false);
    con.stroke();
    con.closePath();
  }
  </script>
</head>

<body onload = "draw()">
  <canvas id = "drawing"
          height = "400px"
          width = "400px">
    <p>No canvas available!</p>
  </canvas>
</body>
</html>

Related Topic