Variable Fonts on p5.js Canvas

Hi Everyone,
i want to work with a variable font on the canvas. I’m wondering, if there is any method to access and modify the variable-font parameters of a text on the canvas.

Cheers Dennis

the last discussion about that, i found on github, but its closed:
https://github.com/processing/p5.js/issues/4992

anyone knows anything if there will be an implementation of variable fonts, via library or in the core anytime soon?

there is a different method by placing the text in a html div like here:
https://editor.p5js.org/amcc/sketches/OCq2mwWmG

but to put the text into the canvas would fit my needs much more and it would improve the possibilities of typographic work in p5.js a lot.

Hi @DennisM – did you try reaching out to karenanndonnachie on github, the author of that issue?

Based on the issue discussion, and also related discussion here: javascript - Variable-Fonts in html5-canvas - Stack Overflow – if I understand correctly it seems like, at that time, SVG is the only viable solution. So the issue is not that it isn’t yet implemented in p5.js specifically, but that it isn’t supported for the htmlcanvas / javascript in general. Somebody would need to start a library project to do this, if they have not already.

An example SVG approach is here:

and a different example of the layering approach you mentioned:

1 Like