Read my book

I wrote books about Webpack and React. Check them out!

Tuesday, September 21, 2010

Crude Painting Application in RightJS

I just came up with a crude little HTML5 canvas based painting application using RightJS. Instead of boring you with some blabber let's just dive into implementation and figure out how the thing works. Here's some code then:



My initial implementation was considerably shorter as you can see from the revision history at GitHub. In this version I separated painting related functionality to a plugin of its own. In addition I extended RightJS with a offset function that returns the location of mouse relative to the element (canvas in this case).

If you have used canvas before the painting code probably looks quite trivial. It probably would make sense to abstract painting a bit but I guess that would be overkill in this case.

The initial code should provide a nice basis for further exploration. It might be nice to hook up a color or size selector with the code. There are certainly a lot of ways to extend it. :)