arc does not respect anti-clockwise if the end angle is exactly 2pi

[potmo]

Issue or Feature

I'm having a really strange bug with context2d arcs and I've managed to isolate it to something that appears to some kind of modulo issue when drawing anti-clockwise arcs that ends exactly at 2pi but starts at a value less than 2pi.

Steps to Reproduce

  let Canvas = require('canvas');
  let canvas = Canvas.createCanvas(1024, 1024);
  let context = canvas.getContext('2d');

  let center_x = 512;
  let center_y = 512;
  let start_angle = 6.283185307179586 ; // exactly 2pi
  let end_angle = 7.5398223686155035;
  let inner_radius = 359.67999999999995;
  let outer_radius = 368.64;

  context.beginPath();
  context.moveTo(center_x + Math.cos(start_angle) * inner_radius, center_y + Math.sin(start_angle) * inner_radius);
  context.lineTo(center_x + Math.cos(start_angle) * outer_radius, center_y + Math.sin(start_angle) * outer_radius);
  context.arc(center_x, center_y, outer_radius, start_angle, end_angle, false);
  context.lineTo(center_x + Math.cos(end_angle) * inner_radius, center_y + Math.sin(end_angle) * inner_radius);
  context.arc(center_x, center_y, inner_radius, end_angle, start_angle, true);
  context.closePath();
  context.stroke();

This is the result:

If I change the start angle let start_angle = 6.283185307179586 + 0.0001; // not exactly 2pi then it works as expected.
(Don't mind the green dot. Its from some other code)

It seems as when the "start angle" is exactly two pi the last argument to arc() (true for anti-clockwise) is not respected and the arc is drawn clockwise anyway.

Your Environment

• canvas 2.6.1
• node v12.11.1
• macOS 11.1

[pkellner]

I'm having a similar issue that may be related.

https://stackoverflow.com/questions/72579857/cant-figure-out-why-html-canvas-arc-fails-with-a-parameter

This code does not render an arc but same code with Math.PI does.

const canvas = document.getElementById("solar-canvas");
const context = canvas.getContext("2d", { alpha: false });

context.beginPath();
context.fillStyle = "red";
//const val = Math.PI * 2;
const val = 3.1415 * 2;
context.arc(190,150, 9, 0, val, true);
context.fill();
context.closePath();