How do you use canvas to render figures?

[slowkow]

This tutorial suggests that picasso.js can render to a canvas, an svg element, or the dom:

https://beta.observablehq.com/@cbt1/picasso-js-creating-your-own-tooltip-component

Is that true?

I don't see any documentation about specifying canvas instead of svg to render figures.

Could I please ask for a minimal example?

It would be nice if I could search for "canvas" or "render" and find instructions on the documentation page: https://picassojs.com/docs/chart.html#render-a-chart

[mindspank]

Each component will have a rendering target where canvas is the prefered one. You can also specify a priority order on the picasso instance picasso.renderer.prio(['canvas'])

[slowkow]

Thanks, Alexander!

Here is a minimal example showing how to switch from SVG to canvas.

Note that SVG is the default renderer, not canvas.

https://jsfiddle.net/slowkow/5ry08e77/

This uses canvas to render the figure:

// this works
picasso.renderer.prio(['canvas'])

// this also works
picasso.renderer.default('canvas')

var mychart = picasso.chart({})

This uses SVG to render the figure:

var mychart = picasso.chart({})

Could I please ask you to add this to the documentation?

The page exists: https://picassojs.com/docs/picasso.html

But there is no link to this page in the documentation, as far as I can tell.

I only found that page because I saw it in the GitHub repo here: docs/dist/picasso.md

[mindspank]

@miralemd ^^ Assuming picasso.renderer.prio() is stable enough to document? If so I can take a stab at it.

[miralemd]

We do indeed support canvas rendering but have apparently completely missed to document that :D.

The way to enable it is to specify the defaultrenderer you want to use on the picasso instance

picasso.renderer.default('canvas')`

@mindspank Stab it :P