drawing an arc on Canvas

[cdaein]

Hi,

Does anybody know a way to draw a simple arc() from 2d Canvas API?

I've tried below but the arc1 doesn't display. arc2 works and is taken from an example. I wonder if it's the only way to draw an arc on Canvas.

const arc1 = arc([200, 200], 160, 0, 0, Math.PI);
const arc2 = pathFromCubics(
  asCubic(arc([200, 200], 200, 0, 0, Math.PI)),
);

// from @thi.ng/hiccup-canvas
draw(ctx, group({ stroke: "pink", weight: 12 }, [arc1, arc2]));

[postspectacular]

Hi @cdaein, there's another way to draw elliptic arcs, but currently it's not compatible with using thi.ng/geom arcs (you'll have to use plain hiccup syntax for those shapes). I will explain below. Here's how you can draw elliptic arcs right now:

draw(ctx, [
	"ellipse",
	{ stroke: "#000" },
	// center
	[300, 300],
	// radii (x, y)
	[200, 100],
	// x-axis rotation
	0.5,
	// start angle (radians)
	0,
	// end angle (radians)
	Math.PI * 1.5,
	// counterclockwise flag
	false
]);

This is an old known issue (#69, also see related section in readme) and apart from the initial oversight on my part, it's actually much more down to incompatibilities between the HTML Canvas API and how arcs are defined in SVG (incl. as part of SVG paths) and therefore also with the same discrepancies between thi.ng/geom & hiccup-canvas. Multiple aspects to that (e.g. defining arcs from center vs end points), but somewhere (likely in hiccup-canvas) a breaking change will need to be introduced, something I've been putting off so far, also because it's been a pretty low priority for me. But I will take another look at it!

Just for reference (also for myself):

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
• https://medium.com/@Ovilia/if-you-wish-to-draw-an-arc-in-a-web-page-then-you-should-probably-use-canvas-or-svg-5a81194bbdf7

[cdaein]

I appreciate your response!

In this case, "arc" worked for me.

  const arc1 = [
    "arc",
    { stroke: "black" },
    [400, 400],
    200,
    0,
    Math.PI,
    false,
  ];

  draw(ctx, arc1);

If I may ask you a follow up question, is there a type that goes with the hiccup shape format instead of treating as a regular array?

[postspectacular]

Hey, of course you can! If you mean class wrappers for arcs (and other shape types), yes, they are're all defined here:

https://github.com/thi-ng/umbrella/tree/develop/packages/geom/src/api

There you can also see how these types can convert themselves to hiccup format by implementing the generic IToHiccup interface, for example:

umbrella/packages/geom/src/api/circle.ts

Lines 25 to 27 in 83d5610

	toHiccup() {
	return ["circle", this.attribs, this.pos, this.r];
	}

...or a more complex case:

umbrella/packages/geom/src/api/arc.ts

Lines 87 to 107 in 83d5610

	toHiccup() {
	return [
	"path",
	this.attribs,
	[["M", this.pointAt(0)], ...this.toHiccupPathSegments()],
	];
	}
	toHiccupPathSegments() {
	return [
	[
	"A",
	this.r[0],
	this.r[1],
	this.axis,
	this.xl,
	this.cw,
	this.pointAt(1),
	],
	];
	}

Each of these classes has one or more corresponding factory functions, e.g.

• `circle()
• circleFrom2Points()
• circleFrom3Points()
• arc()
• arcFrom2Points()

Is that what you meant? As I tried to explain (sorry if I wasn't doing a good job), the current issue with arcs (and the reason for having to use plain hiccup arrays) is that still existing issue/incompatibility between canvas API & SVG. But this only applies to (elliptic) arcs, i.e. what the above linked Arc type and arcXXX functions produce. Well, the same also applies to any Path which contains arc segments... will deal with this soon! Thanks for your patience :)

[cdaein]

Your explanation was perfect to understand the canvas/svg incompatibility as to how elliptic arc works.
And I should have worded my question better. What I meant was if there's a type for hiccup shape array as this didn't work for me:

// IHiccupShape type doesn't work here
const arc1: IHiccupShape = [
  "arc",
  { stroke: "black" },
  [400, 400],
  200,
  0,
  Math.PI,
  false,
];

[postspectacular]

Oh sorry, I see what you mean now - my bad... Here's the definition of the IHiccupShape interface:

umbrella/packages/geom-api/src/shape.ts

Line 39 in 83d5610

export interface IHiccupShape extends IShape, IToHiccup {}

Since you only seem to be interested in circular arcs, I think for the time being (until this underlying issue will be fixed), you could use a temporary "circular arc" shape type, something like:

import type { Attribs, IHiccupShape } from "@thi.ng/geom-api";
import { __copyAttribs } from "@thi.ng/geom/internal/copy";
import { TAU } from "@thi.ng/math/api";
import { set2, type Vec } from "@thi.ng/vectors";

export class CircularArc implements IHiccupShape {
    constructor(
        public pos: Vec = [0, 0],
        public r = 1,
        public start = 0,
        public end = TAU,
        public ccw = false,
        public attribs?: Attribs
    ) {}

    get type() {
        return "arc";
    }

    copy(): CircularArc {
        return new CircularArc(set2([], this.pos), this.r, this.start, this.end, this.ccw, __copyAttribs(this));
    }

    withAttribs(attribs: Attribs): CircularArc {
        return new CircularArc(this.pos, this.r, this.start, this.end, this.ccw, attribs);
    }

    toHiccup() {
        // temporary situation only: "arc" shape type ID is already used by
        // elliptic arcs in thi.ng/geom & thi.ng/hiccup-svg, but refers to
        // circular arcs in thi.ng/hiccup-canvas - this is BAD!!!
        // this all needs to be resolved asap!
        return ["arc", this.attribs, this.pos, this.r, this.start, this.end, this.ccw];
    }
}

This type at least conforms to the IHiccupShape interface and so can be used as child element in groups etc. Should also have no problem with drawing this. I will do a new release with some minor (somewhat related) bug fixes in the next hour (i.e. the draw() function ignored the counterclockwise flag so far, doh!)

Also, I haven't tested this above class yet, but hope this works. Please let me know! :)

[cdaein]

Thank you!

I was looking for something like:

type HiccupArc = [
  "arc",
  { [key: string]: any },
  Vec,
  number,
  number,
  number,
  boolean,
];

const arc2: HiccupArc = [
  "arc",
  { stroke: "black", weight: 40 },
  [400, 400],
  100,
  0,
  Math.PI,
  false,
];

but with your class implementation, I can now make it work like:

const arc1 = new CircularArc([400, 400], 200, 0, Math.PI, false, {
  stroke: "black",
  weight: 40,
});
draw(ctx, arc1);

[postspectacular]

I think this whole interplay between geom, hiccup, hiccup-svg & hiccup-canvas needs to be documented more, I'm just not entirely sure where would be the best place for it. In short:

• thi.ng/geom provides various shape types, shape conversions and other shape operations but cares nothing about drawing. All shapes have a .toHiccup() function to represent themselves in hiccup format for general interchange purpose)
• thi.ng/hiccup-canvas only expects shapes hierarchies as hiccup arrays (or types which implement the .toHiccup() function, like the ones from thi.ng/geom)
• thi.ng/hiccup-svg provides shape functions producing hiccup arrays only for SVG serialization. The hiccup format used here is different and not optimized for realtime purposes, compared to the flavor both produced by thi.ng/geom and expected by thi.ng/hiccup-canvas. The difference here is that shape attribute values produced by this package will all be stringified already and hence are only really usable for SVG generation. However, the package also provides a conversion function to convert from the thi.ng/geom hiccup format (which you don't usually need to call manually, since it's handled automatically by geom's asSvg() function to serialize shapes/groups to SVG...)

Hope this explains the bigger picture a bit more (also why there're different packages, each with a different concern/use case)

[cdaein]

I'm only getting started but already realizing the separation between data and drawing in @thi.ng/geom is a very powerful concept. Thank you for the additional explanation. 🙏

[postspectacular]

@cdaein An exciting update on this: I just fixed #69 and the next release (maybe later today or tomorrow) will support both paths with elliptic arc segments and/or holes (at last!). I've updated the readme already:

https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas#path

[cdaein]

Thank you for the update!

I was just trying out the circular arc with arc() but the result was not what I expected. I thought the position should be at the center of the circle. Changing the end angle looks a bit strange, too.

    const arc1 = arc([200, 200], 160, 0, 0, Math.PI * 0.5);
    const arc2 = pathFromCubics(
      asCubic(arc([200, 200], 200, 0, 0, Math.PI * 0.5)),
    );

    draw(ctx, group({ stroke: "pink", weight: 12 }, [arc1]));
    draw(ctx, group({ stroke: "lightgreen", weight: 12 }, [arc2]));

Result:

[postspectacular]

Please try again @cdaein - I fixed another bug with that arc() factory function earlier today, but was offline and just published a few mins ago...

[postspectacular]

Also see the updated demo: https://demo.thi.ng/umbrella/hiccup-canvas-arcs/

[cdaein]

it's working beautifully now! thank you!

[postspectacular]

Woo hoo! To this day I don't understand why specifying arcs had to be made so a complicated (in SVG) and then using a diff approach for the canvas API, requiring even more conversions...