3 ms·
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
by antichaos 16y ago
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 16y agoCan you explain how canvas generates a PNG on the client side?
- antichaos 16y agoFirst 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-canvas-todataurl http://www.w3.org/TR/html5/the-canvas-element.html#dom-canva... [2] http://en.wikipedia.org/wiki/Data_Url http://en.wikipedia.org/wiki/Data_Url
- toshi 16y agoAlternatively, 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.
- revorad 16y agoThanks. One simple UI improvement suggestion: add a visual indicator to mouse overs for all the buttons. I usually prefer a change of colour or cursor pointer.
- deleted 16y ago[deleted]