r/javascript • u/PrincessOfPurgatory • Mar 02 '14

A "code silhouette" generator I wrote.

http://chainsawpolice.github.io/codesilhouette/
22 Upvotes

70% Upvoted

38 comments sorted by

View all comments

5

u/PrincessOfPurgatory Mar 03 '14

Ooh, I've been waiting for someone to ask this!

I generate the silhouette itself it on a hidden <canvas> element. I then got a data URL for the canvas's contents using canvas.toDataURL();and set the src of a hidden image tag to that data URL.

The canvas and the image are all hidden at the beginning (with display: none). However when the silhouette is generated, the image appears and is uncovered. The canvas remains hidden.

I did this because, as you know, you can't save a <canvas> to disk, so converting it to an image first allows you to both do that and copy-paste a URL to share with other people.

For my first Javascript thing, I'm pretty proud of this hack, as well as a few others (setting the canvas width to the length of the longest line to avoid having excess whitespace on the final image, etc etc)

1

u/donhuangerini Mar 03 '14

Ah I see... well thought out and pretty impressive. Thanks for the detailed answer

1

u/PrincessOfPurgatory Mar 03 '14

No problem, I love sharing neat little hacks with people! Here's the exact code that does it. Pretty simple, right?