Search code examples
javascripthtmlhtml5-canvas

Filling a circle doesn't work as expected

I was working with the canvas API, but when working with CanvasRenderingContext2D.arc(x,y,radius,startAngle,endAngle,couterclockwise) which mentioned in the documentation that it takes the following arguments:

x: The horizontal coordinate of the arc's center.

y: The vertical coordinate of the arc's center.

radius: The arc's radius. Must be positive.

startAngle: The angle at which the arc starts in radians, measured from the positive x-axis.

endAngle: The angle at which the arc ends in radians, measured from the positive x-axis.

counterclockwise Optional: An optional boolean value. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise)

I found that when for example I am setting the startAngle to 0 and endAngle 1.5*MathPI and fill the circle it gives a segment and not 3/4 of a circle as I was expecting. I am trying to find a way to use it to make portions of a circuit not a segment but with no hope.

here is the code

const canvas = document.querySelector('.canvas');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 3 / 2, false);
ctx.fillStyle = 'red';
ctx.fill();
* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}
<canvas class="canvas"></canvas>

The output enter image description here

I was expecting output to be a 3/4 of a circle starting from 0 to 3/2*PI. I just want to know how to use the canvas API to make my expected ouput.

Solution

  • What happens is that when using

    ctx.arc(100, 100, 50, 0, Math.PI * 3/2, false);

    this will create an arc between two points as the name suggest (ctx.arc) and when we fill the shape: it will connect the startAngle point to the endAngle Point. and fill this shape. And to see this, we can use the stroke style and stroke method to see the output and it will be something like that enter image description here

    This after changing the code as follows:

    
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 3/2, false);
// ctx.lineTo(100,100);
// ctx.closePath();

ctx.strokeStyle = 'red';
ctx.stroke();

    To make a 3/4 of a circle, we need to draw a line from the endAngle to the center and then close the path to the start angle.

    we can do this as follows:

    ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 3/2, false);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

    and this will have a 3/4 of a circle as shown below.

    const canvas = document.querySelector('.canvas');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 3 / 2, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
    * {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}
    <canvas class="canvas"></canvas>

    enter image description here