Paint on HTML5 Canvas with KineticJS

Paint on Canvas at Clodeo Lab

Paint on Canvas at Clodeo Lab

This idea came up when I needed to add new feature at clodeo. The basic idea was to improve current meeting room feature. The feature currently can only be used as a chatting room with manageable room, but in fact, chatting feature is not enough. I need something which can handle visual process like painting, adding image, or resizing image and that’s why I started this research. A virtual “white board” which is complemented with chat board, so users will be able to coordinate with other team remotely, for sure.

At first, I try using only Javascript without any other JS framework until one point that I need to be able to drag image. After a several searches, I found that I could use KineticJS. Basically, from that point, I was amazed by the ability that KineticJS brought for me. And so the research continued smoothly.

In the middle of my research, I realized the research brought me more ideas, and those ideas could lead to various applications. But before I reach that point, I needed to assure that it could fulfill some tasks. Those tasks are:

  1. Able to paint in many colors
  2. Able to add, resize, and remove images
  3. Able to clear canvas
  4. Able to save it into an image
  5. Able to erase
  6. Able to save the activity status, so it can be continued later
  7. Apply websocket for real time paint update

I believe those 7 points will take some times from me. But actually, I’m in a high spirit in doing this. Oh! I just remembered to tell you that I’ve published the prototype at Clodeo Lab. So, don’t hesitate to visit and try it!

About these ads

4 thoughts on “Paint on HTML5 Canvas with KineticJS

  1. Hi man,

    Excellent post, do you go on with the develop?

    I need create something like that. Maybe, we could have a deal… contact me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s