{Carrer web log} ←

Canvas Grid - JS1K entry

Thursday, September 30, 2010 { 4 Comments }

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 grid


Note: 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.

4 Responses to “Canvas Grid - JS1K entry”

1. //  Beben Koben // 10/06/2010

   I'm also collected bookmarks;)
   "http://beben-koben.blogspot.com/2010/05/brainy-bookmarklet-links.html"
   hihihihihi :D ;)  

2. //  Vladimir // 10/06/2010

   @Beben: Nice collection :)  

3. //  DD // 10/07/2010

   I think your idea just great!
   I can also change the thickness of the line right?  

4. //  Vladimir // 10/08/2010

   @DD: I'm working on the new version (when I have little more free time), stay tuned. The new version will support 1px line.  

Post a Comment

<< Home