drawing round rects on canvas

[robertoranon]

Hi,
I have a bunch of Rect objects that I draw on an HTML Canvas using the draw function from the hiccup-canvas package. How can I draw them with round corners? The docs in hiccup-canvas mention a radius parameter, but I don't understand how to set it in the rects.
Thanks!

[postspectacular]

Hi @robertoranon - so far rounded rects were in hiccup-canvas only directly supported via vanilla hiccup shape syntax, but I've just updated the draw() function in this package to also support thi.ng/geom shapes. For those shape you just use the optional r attribute to define the corner radius (which defaults to 0).

// a rounded rect with radius=20
rect([0,0], [100, 200], { r: 20 })

Just know that this attrib is only used for canvas drawing and/or SVG conversion (just updated thi.ng/hiccup-svg to support this r attrib too) - but the attrib has no impact on any other shape calculations/transformations in thi.ng/geom. If you really do need the latter, you'll need to (manually for now) construct a rounded rect via thi.ng/geom's pathBuilder() or similar (e.g. via asCubic() and pathFromCubics()).

pathFromCubics(asCubic(rect([100,200]), { breakPoints: true, uniform: false, scale: 0.25 }))

Hth!

[cdaein]

Would you have an example of using vanilla hiccup shape syntax for canvas drawing (with hiccup-canvas)?

[postspectacular]

Sure. First off, I've been using this opportunity to clean up and extract some of the existing canvas creation & adaptation functions and have just added a new package thi.ng/canvas (which also deprecates thi.ng/adapt-dpi).

As part of doing this, there's now also a small "vanilla" hiccup-canvas demo here:

Demo (refresh for random combo):
https://demo.thi.ng/umbrella/hiccup-canvas-basics/

Source:
https://github.com/thi-ng/umbrella/blob/develop/examples/hiccup-canvas-basics/

Btw. All supported shape types and their syntax are listed in the package readme:
https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-canvas#supported-shape-types

Hope that helps!

[cdaein]

This is immensely helpful. Thank you!

[postspectacular]

Great! :) The import thing to remember is that you can choose from 3 levels of abstraction:

1. Using thi.ng/geom shapes (or groups/hierarchies), which implement the IToHiccup interface

For example for the Rect type:

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

Lines 48 to 50 in 36d9317

	toHiccup() {
	return ["rect", this.attribs, this.pos, this.size[0], this.size[1]];
	}

2. Using the thi.ng/hiccup array convention directly (as shown above) with the draw() function, or...
3. Directly using shape-specific draw functions in hiccup-canvas, e.g.

umbrella/packages/hiccup-canvas/src/rect.ts

Lines 5 to 38 in 36d9317

	export const rect = (
	ctx: CanvasRenderingContext2D,
	attribs: IObjectOf<any>,
	pos: ReadonlyVec,
	w: number,
	h: number,
	r = 0
	) => {
	let v: any;
	if (r > 0) {
	r = Math.min(Math.min(w, h) / 2, r);
	w -= 2 * r;
	h -= 2 * r;
	return path(ctx, attribs, [
	["M", [pos[0] + r, pos[1]]],
	["h", w],
	// FIXME need new type ID for circular arcs
	// see issues #69 & #418
	["a", [r, 0], [r, r], r],
	["v", h],
	["a", [0, r], [-r, r], r],
	["h", -w],
	["a", [-r, 0], [-r, -r], r],
	["v", -h],
	["a", [0, -r], [r, -r], r],
	]);
	}
	if ((v = attribs.fill) && v !== "none") {
	ctx.fillRect(pos[0], pos[1], w, h);
	}
	if ((v = attribs.stroke) && v !== "none") {
	ctx.strokeRect(pos[0], pos[1], w, h);
	}
	};

This last option is generally not really recommended, since these functions are considered "low level" and don't take care of any canvas state handling as the other two routes (i.e. applying, storing and restoring stroke/fill, transforms, etc.). It all depends on your use case... 😉

[robertoranon]

wow, so fast, thanks!

[postspectacular]

WOW!! Beautiful system! :)

Btw. There's a little bugfix still incoming. The new draw() function currently breaks if a shape has NO attribs. New version should be ready in ~5 mins...