Canvas Grid - JS1K entry

Thursday, September 30, 2010 { 4 Comments }

Responses to “Canvas Grid - JS1K entry”

If you are Java Script developer you probably heard about 1k Javascript contest Like many I also wanted to experiment with the new HTML5 canvas element. There are many canvas demos on the contest that are incredible. It still amaze me what people did with 1Kb of JS.I started with the thought not to build something cool but something useful that can be used after the contest.The main inspiring idea were the Mark Pilgrim thoughts and examples about canvas I decided to build simple Canvas Grid with 10px squares and 100px marks around all the visual browser space.I used the code to later build an bookmarklet who can help many web designers to better understand the relation between browser dimensions and the web site.And here is a picture what this bookmarklet does:And here is the bookmarklet: Canvas Grid - Drag the link to your browser bookmark toolbar, use F5(refresh) to clear the gridNote: In some cases you will have web site colors that are similar to the grid lines or have high contrast and you will get non clear results. Fell to modify this script or bookmarklet in any way you like. If you have any questions fell free to comment or send me an email.