Web based drawing canvas (no HTML5)

I have a need for a web based drawing tool, much like Microsoft Paint – just a simple canvas that allows me to draw on it. I’ve searched around a bit and have found that the majority of the tools are Flash based and the ones that are not are lacking in one way or another.

So I decided to create a simple, purely web based drawing tool. This works in all browsers and even works on my iPad (although I have to click each square to form the drawing on the iPad since dragging simply moves the screen). The canvas, with a drawing, is shown in Figure 1.

It uses some simple JavaScript and CSS to achieve the effect. The grid lines, border, and cell size are all controlled by CSS. Just click or click and drag to draw. Do the same while holding down the SHIFT key to erase (draw in alternate color). I chose to use the SHIFT key combination for color 2 to avoid conflict with context menus when right clicking and OS specific uses for ALT and CTRL.


Figure 1: Picture of a drawing done on “Canvas” (demo link below).

Everything is encapsulated inside the Canvas object, so it is really easy to use. All you need is a DIV, a little bit of CSS, and the couple lines of JavaScript below.

Here’s how to use it:

// Creates the canvas - just make sure you have a DIV with an id of "drawingArea"
// The last parameter of false allows editing - set to true for read only
// Note that these are squares - actual square size is set via CSS
var myCanvas = new Canvas("drawingArea", 60, 40, false);

// This will change the drawing colors
myCanvas.setFillColor("#CCCCCC"); // #000 by default
myCanvas.setEraseColor("#555555"); // #FFF by default

// This will resize the canvas, preserving what portions of the drawing it can
myCanvas.resize(100, 10); // 100 wide by 10 high

// This will save the contents of the canvas down to a JSON string
var myData = myCanvas.save();

// This will load a drawing from a JSON string
myCanvas.load(myData);

You can view a working demo here.

You can find the JS file here:
http://www.mcdonaldland.info/files/canvas/canvas.js

Note that you’ll also need the JSON2 JS file as well:
http://www.mcdonaldland.info/files/canvas/json2.js

An improvement idea:
When mouse moves fast, lines have gaps in them. It would be pretty easy to write an algorithm that figures out empty squares between two points and fills them in. Alternatively, it wouldn’t be too difficult to handle this without tables by tracking the mouse location within the DIV then drawing points/lines.

Feel free to use this as you see fit. I just ask that you:

  1. Leave the copyright information at the top of the JS file in place.
  2. Don’t sell the code or any product that has this code as the core feature without my consent.

Enjoy!


About the author

Jason McDonald

View all posts

6 Comments

  • I did see it and it is pretty cool – just a little more than I needed. I wanted something that will let you just put a handful of pixels on the screen.

    Plus, it is a good opportunity to write some fun new JS code… 🙂

    Thanks!

  • Hi Jason,

    Have you had a chance to work with either SVG or VML? It seems Canvas is the wave of the future, but I thought you might find this library for the afore mentioned technologies interesting in your quest to do an in browser Paint: http://raphaeljs.com/

    — Aaron

  • hi this neo
    I was looking for web based drawing canvas tool i have read your article totally but i’m having lot doubts please be active and reply me so that you can help me

  • I got lazy in my last round of updates and neglected to test in all major browsers. When I started using it last night I found that it didn’t work in at least IE and Chrome.

    I updated the script to use the JSON2 (http://www.json.org/js.html) library to convert to and from JSON instead of the method I was using. I’ve tested this in FF, IE, Chrome, and Safari and all work.

  • I re-posted this with the following feature enhancements:

    1. Canvas now supports a read only mode.
    2. Can now save canvas information and drawing down to a JSON string.
    3. Can now load canvas information and drawing from a JSON string.
    4. Resize now preserves what part of any existing drawing it can.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.