Paint.JS

• Download source files - 1.94 KB

Disclaimer

The author does not accept responsibility for any effects, adverse or otherwise, that this code may have on you, your computer, your sanity, your dog, and anything else that you can think of. Use it at your own risk. (Deja Vu? I also love the Allegro disclaimer.)

Quick and Dirty Tour

So you don't like to read all articles you see on the Web, or you don't have time for it? Then, just download the source files, and open the paintjs.htm file in your favorite browser.

Background

Although some functionality uses DOM functions, you need only to have basic knowledge of HTML and JavaScript to use and extend the tool.

Introduction

Stop where you are! Don't think you are going to find a match for Photoshop here! In fact, it is no match even for old Paintbrush. This tool is for your amusement and allows beginners to understand a little bit more about DOM in a fun way.

The Functionality

Currently, only two functions can be accomplished by the tool: (pseudo) pixel-plotting and (pseudo) fill background. Why "pseudo" one might wonder? Well that's the reason you need to keep reading!

Fill the Background

If you look at the PaintJS.htm file, you will notice that there are few tags on the HTML body. It should look like the code below:

    ...
    <div id="renderSurface" class="renderSurface"></div>
    <div id="colorPreviewPane" class="colorPreviewPane"></div>
    ...

For now, we are interested in the renderSurface element. This DIV is the chosen one to hold the background-color property when you are filling the screen. That's no real pixel filling going on here, only an element color change, that's the reason I called it pseudo-fill.

            function StartPlot(event)
            {
...                var fill = document.getElementById("fill").checked;             
                var buffer = document.getElementById("renderSurface");             
...
                if( fill )
                {
                    buffer.style.backgroundColor = 
                    currentSelectedColor.style.backgroundColor;
                }
            }

Plotting Pixels

In the last topic, we saw that renderSurface element is the key of our tool, and it is also important for pixel-plotting. First, let's see what a pixel is made of here. There's no native pixel manipulation available on browsers today, so we cannot do it. Therefore, I actually create a div element with the specified size and color in the mouse click position (x, y). Again, that's the reason for a pseudo prefix. So, one might wonder, if nothing is a browser's real capability here, what did I do this demo for? Simple answer: "to show you the power of DOM manipulation with JavaScript". Remember, impossible is nothing, let your creativity play! Let's take a look at how pixel-plotting does its work.

First, call StartPlot when the mouse button is down. Then, we call PixelPlot on every mouse move until the user releases the button triggering the StopPlot function.

            function StartPlot(event)
            {
...                
                var buffer = document.getElementById("renderSurface");             
                if( pencil )
                {
                    buffer.onmousemove = PixelPlot;
                    buffer.onmouseup = StopPlot;
                }
...
            }

The real work is done in the PixelPlot function:

1. First, we get the event (if you don't know already, Internet Explorer does not send events by parameter, so you need to get it from the window object).
2. Then we figure out the mouse cursor current position.
3. Now we dynamically create a DIV element and set its properties. Note that just creating it does not add it to the page itself.
4. With the element in hand, we add it to the renderSurface element (that will act as a container).

function PixelPlot(event)
{
    //1
    if(!event) event = window.event;                

    //2
    var cx = parseInt(event.clientX);
    var cy = parseInt(event.clientY);              

    //3
    var w = parseInt(document.getElementById("pixelWidth").value);
    var h = parseInt(document.getElementById("pixelHeight").value);
    var newPixel = document.createElement("div");
    newPixel.className = "pixel";
    newPixel.style.borderTop = 
        "4px solid " + currentSelectedColor.style.backgroundColor;
    newPixel.style.top = cy;
    newPixel.style.left = cx;
    newPixel.style.width = w + "px";
    newPixel.style.height = h + "px";
    newPixel.style.zIndex = 0;
                
    //4                
    var buffer = document.getElementById("renderSurface");
    buffer.appendChild(newPixel);                
}

The StopPlot function simply removes the event triggers, so nothing will happen until the user clicks again.

function StopPlot(event)
{
    var buffer = document.getElementById("renderSurface");
    buffer.onmousemove = null;
    buffer.onmouseup = null;
}

Some may have noticed that this approach for attaching/releasing events in pixel-plotting may also be used for the principles of drag-and-drop functionality in JavaScript.

I Want Real Graphics Capabilities! (or Show me the Real Deal)

I told you in the last topic that no browser can manipulate pixels today. Ok, I was kind of lying, please forgive me. Currently, CANVAS tag in what is been called HTML5 is able to do some amazing things. If you wish to go deep into this, you may also want to check out Opera's 2d-game-canvas initiative.

Get Into the Line

I've added some line drawing capabilities, using the pixel drawing function as a base. For further explanations of the Bresenham algorithm, try your favorite math book or this link. Remember, I'm no mathematician, so I'm not into slopes and lines equations... (I just wish I knew a little bit more about math...)

Conclusion

That's all I have to offer for now. Please feel free to ask for new functionality, report bugs on other browsers or to tell me how boring this stuff is.

References

Some great resources on the Web:

• W3 Schools (1999) (Last access on 05/26/2006)
• W3C (1994). World Wide Web Consortium (Last access on 05/26/2006)

History

• 03-07-2007
  • Bug fixes (workaround for browser issues relative to rectangular pixels)
  • NEW!! Line drawing capabilities! Still pretty simple, but it's interesting
• 02-16-2006
  • Fixed a small bug for correction of pixel height
• 12-06-2006
  • Original article

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)