The third JavaScript challenge showed us what it would be like to draw with canvas. The challenge was open ended, in so far as there were no restrictions as to what drawing technology could have been used, but everyone just went straight for canvas.

Arian Stolwijk - https://tinker.io/9d871/1

Arian impresses once again with some beautiful code. It’s also a good example of how to use requestAnimationFrame and how to calculate FPS.

Mickele Moriconi - http://jsfiddle.net/czsEe/

Mickele’s example showcases a disembodied arrow to indicate the direction in which the cursor is pointed as well as keyboard navigation and event delegation.

Pete - http://jsfiddle.net/NHhqA/, http://jsfiddle.net/DRgNd/, http://jsfiddle.net/2T8v4/, http://jsfiddle.net/u922h/

Pete really shines in this challenge; presenting many concepts and explaining the differences and benefits of various approaches to efficient design of his examples. If nothing else, read through his explanation of the coding approach he has taken in his third and fourth examples.

Corto - http://jsfiddle.net/corto/qrPav/7/

Corto used CoffeeScript and jQuery to build his example. Once you get over all the @ symbols, it’s really quite concise. :)

The purpose of this was to explore different means of input-based drawing with SVG, DOM and canvas. While we would have like to see more DOM and SVG implementations, there were many good examples of canvas usage!

We would like to thank everyone that participated - it was fun to see so much conversation and collaboration around a fun JavaScript challenge. Be sure to check out the Challenges category of blog posts for new challenges every week!

comments powered byDisqus