Add text rendering

[pshihn]

Perhaps use https://github.com/ipython/xkcd-font
or https://fonts.google.com/specimen/Amatic+SC

Ideally should be able to configure the font, but using one of these two as a default. Will work with Canvas and SVG.

Also, see: https://bl.ocks.org/aaizemberg/76b00a3aa08d7161b980d915db6a85a2

[hpvd]

awesome idea !

just for the backlog:
on the very long haul, one should keep in mind and give an example that one should find a solution to make also this drawn text accessible (for screen-readers and search-engines...)

[bcherny]

+1 I just set up roughjs for my remark presentation, then realized that roughjs doesn't support text for the flowchart I wanted to draw. As soon as roughjs supports text, I'm using it for every presentation I do!

Edit: The blo.ocks approach above works well as a stop gap!

[pshihn]

@bcherny You can continue to use the standard canvas context2d object with roughjs. Use the former to render text on canvas. e.g. https://bl.ocks.org/aaizemberg/b403ba342cf0cd32d3e8a77174dcf8a0

But, you're right built in text rendering would be simpler

[hpvd]

@bcherny that's pretty interesting. Would you mind giving some words on the tool/process you build your presentation with?

[bcherny]

@hpvd Sure! I'm using Remark with plugins for better syntax highlighting and live reload.

Highlighting, live reload, and XKCD font are here.
Rough + XKCD font setup is here.

It's all pretty hacked together. Maybe I'll get it into its own package at some point.

[hpvd]

@bcherny wow. nice. many thanks for sharing!

[pshihn]

Since one could use any hand written font on a web page, I think this is out of scope for this project.
There's an idea to create a truly random variable font for wired-elements rough-stuff/wired-elements#12 which would be a better place to track these ideas.