HTML5 Game - Canvas Drawing Arcs

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

Introduction

We use the arc and arcTo methods to draw arcs on the canvas.

The following table describes the arc-related methods in the canvas.

Name
 Description
 Returns
arc(x, y, rad, startAngle,
endAngle,direction)

 Draws an arc to (x, y) with radius rad, start angle
startAngle, and finish angle endAngle. The optional
direction parameter specifies the direction of the arc
 void


arcTo(x1, y1, x2, y2,rad)

 Draw an arc to (x2, y2) that passes (x1, y1) and has radius
rad
void

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>//from www  .j a v  a 2s  .  c o m
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

         // Arcs 
         context.beginPath(); 
         context.arc(275, 275, 50, 0, Math.PI * 2, true); 

         context.moveTo(310, 275); 
         context.arc(275, 275, 35, 0, 0.75 * Math.PI, false); 

         context.moveTo(300, 255); 
         context.arc(265, 255, 35, 0, 0.5 * Math.PI, false); 

         context.moveTo(280, 255); 
         context.arc(245, 255, 35, 0, 0.2 * Math.PI, false); 
         context.closePath(); 
         context.stroke(); 

  
</script> 

</div>
</body>
</html>

Related Topic