DEV Community

loading...
Cover image for Experiments with code: drawing with Rough.js

Experiments with code: drawing with Rough.js

Melissa McEwen
Developer Advocate at Skypack
・1 min read

One of the top reasons I never blog is because I always feel obligated to make images for my blog posts. And then I spend too much time making images. I decided to generate one using JavaScript. It turned out super weird looking but it was fun to make.

Anyway, I used Rough.js in Codepen using Skypack. Rough.js is a nifty library for making canvas and svg graphics with a hand-drawn appearance.

vintage cookbook image, showing hand drawn chickens on a green polygon

I started with a picture from a vintage cookbook (James Beard's Fireside Cookbook). I added a rough polygon for a background and then some circles as decoration.

It was pretty fun experimenting with different options even if some were pretty hilariously ugly. I call this one "diseased cookies":

green polygon, text that says hello world, ugly circles with weird dots

Finally I used the regular Canvas browser API to add some text.

If you'd like to play around with it, here is the CodePen I used:

Discussion (2)

Collapse
robertseidler profile image
RobertSeidler • Edited

cool, thanks. rough.js looks pretty usefull.

Also I have to say, I really like the image you did (the cookbook one). It looks so lively :D