Posted by & filed under jsPaint, Project.

I love DeviantArt’s Muro sketchpad. It’s freaking amazing. I just don’t want every doodle to end up in my DA gallery. So, I needed a different image host. Just so happens Imgur has an API, with examples (well rough ones). I also just so happen to be wanting a project to learn JQuery. Thus, this new project was born.

Right now, it has the ability to anonymously upload the canvas to Imgur. This took a fair bit of tinkering as there’s no set standard yet for sending canvases as FormData. I ended up combining a few scripts together to get a getBlob() function working (blob has got to be the most ambiguous name ever for this functionality).

I read a few tutorials on creating a basic painting app so that I could test out a simple creation. I found this article to be fairly good to draw actual lines. I’ll be looking into a better method later, as right now this code is running on only two classes which are barely used.

I added a nice brush size cursor overlay, and let the mousewheel control the brush size like in Photoshop with the appropriate JQuery plugin.

My next goal is getting the drawing part to have layers, and an undo function. Both require a well thought out bunch of classes, which is why I haven’t bothered tackling them yet. From there I can make keyboard shortcuts.

You can try the latest demo at: http://xshade.ca/draw/index.html or check out the code on GitHub.

Leave a Reply

  •  

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax