{Carrer web log}

Blog about web design & development

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. // Blogger Beben Koben // 10/06/2010

    I'm also collected bookmarks;)
    hihihihihi :D ;)  

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

    @Beben: Nice collection :)  

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

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

  4. // Blogger 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

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License