Archive - November 2010

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.

Note that you’ll also need the JSON2 JS file as well from here.

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!

I searched the web for quite a while and couldn’t find a good answer to this problem, so I figured I’d post it to save the next person a little time.

I have a situation where I want to send an event to an instance of a JavaScript object. I could get it to go to the object itself, but was having trouble getting it to apply to only a specific instance of the object.

The answer was surprisingly simple – just wrap the pointer to your event handler function in an anonymous function. Doing this gives the anonymous function (closure) access to the variables currently in scope, which means that I have access to my object instance now.

The code is below. The commented out event listener add lines were the original attempt that would result in “undefined” being printed to the screen instead of my instance variable value. The uncommented version correctly calls my instance, which prints “test” to the debug area of the screen each time it is clicked.

// The object to handle the event...
function TestListenerObj(txt) {
    this.eventText = txt;
    this.handleEvent = function() {
        var debug = document.getElementById("debug");
        debug.innerHTML = debug.innerHTML + this.eventText + "<br/>";
        return false;
    }
}

// Sets up the event handler
function init() {
    var link = document.getElementById("test_link");
    var obj = new TestListenerObj("test");

    if (link.addEventListener) {
        // link.addEventListener("click", obj.handleEvent, false); // Calls "class" level handleEvent()
        link.addEventListener("click", function() { obj.handleEvent(); }, false); // Calls instance level handleEvent()
    } else {
        // link.attachEvent("onclick", obj.handleEvent ); // Calls "class" level handleEvent()
        link.attachEvent("onclick", function() { obj.handleEvent(); }); // Calls instance level handleEvent()
    }
}

For a working example go here. For complete source visit this link and view source. Just click the “Test” link on the example to see the event be handled by the object, which in this case just prints to the debug area.