

Show HN: HTML5 grid-drawing tool for UI designers - antichaos
http://www.neatgrid.com

======
kilian
A number of years ago I build a grid drawing tool as a jQuery plugin, it's
still available here: <http://gridbuilder.kilianvalkhof.com/> Might be useful
to other people developing locally/designing in the browser like I do.

------
antichaos
NeatGrid is a simple HTML5 canvas application for UI designers to easily
create pixel-perfect grids in the browser. I created it over the weekend to
scratch my own itch. If you happen to have the same need to draw grids, please
give it a whirl. Cheers!

~~~
revorad
Can you explain how canvas generates a PNG on the client side?

~~~
antichaos
First call canvas.toDataURL() to get a base-64 encoded string for the image
[1], then open a new window with that data URL [2].

[1] [http://www.w3.org/TR/html5/the-canvas-element.html#dom-
canva...](http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-
todataurl)

[2] <http://en.wikipedia.org/wiki/Data_Url>

~~~
toshi
Alternatively, you may also set window.location.href = data_URL. That brings
up the "save as" dialog window directly.

Nice work, BTW! One nitpick: the link icon looks like a resistor. It's not
obvious what it's supposed to do, although once I figured it out, I find it
very handy.

------
thehodge
That's pretty cool, although it took me a minute or two to see where the
download button was (I was confused I couldn't right click and save as) but I
guess thats canvas for you

~~~
antichaos
Thanks for the quick feedback! I've just moved the download button to a more
prominent location.

------
Raphael
Why images? Wouldn't HTML/CSS be more useful?

