Click here to Skip to main content
Click here to Skip to main content

Paint.JS

, 7 Mar 2007 CPOL
Rate this:
Please Sign up or sign in to vote.
This tool is for your amusement and allows beginners to understand a little bit more about DOM in a fun way.

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:

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

License

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

Share

About the Author

Roberto Colnaghi
Software Developer
United States United States
I'm a passionate developer and videogame player.
Been in touch with Objective-C, Javascript, C#, C, Guild Wars 2, Tera and many more.
 
Javascript is one of my favorite languages.
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralSimilar thing but this uses server side for the rendering... PinmemberAurelius16643-Sep-09 7:53 
GeneralPaint! Pinmemberdanielcolnaghi5-May-09 10:12 
GeneralWii PinmemberRoberto 'Obi-Wan' Colnaghi Junior1-Jan-08 18:44 
Generalcool PinmemberBisogno7-Mar-07 23:58 
GeneralRe: cool PinmemberRoberto 'Obi-Wan' Colnaghi Junior21-Mar-07 8:27 
GeneralNeater PinmemberBen Daniel7-Mar-07 17:50 
GeneralRe: Neater PinmemberRoberto 'Obi-Wan' Colnaghi Junior21-Mar-07 8:24 
GeneralFound small error PinmemberGert_G16-Feb-07 2:08 
GeneralRe: Found small error PinmemberRoberto 'Obi-Wan' Colnaghi Junior16-Feb-07 3:19 
GeneralRe: Found small error PinmemberPeter.Chan24-Feb-07 4:39 
GeneralRe: Found small error PinmemberRoberto 'Obi-Wan' Colnaghi Junior7-Mar-07 15:31 
GeneralRe: Found small error PinmemberRoberto 'Obi-Wan' Colnaghi Junior7-Mar-07 16:58 
GeneralGalo PinmemberLucas Colnaghi7-Feb-07 9:06 
GeneralRe: Galo PinmemberRoberto 'Obi-Wan' Colnaghi Junior7-Feb-07 9:43 
Generalgreat job PinmemberSacha Barber16-Dec-06 3:02 
GeneralRe: great job PinmemberRoberto 'Obi-Wan' Colnaghi Junior16-Dec-06 6:13 
GeneralNice trick! PinmemberLuciano Bargmann6-Dec-06 2:43 
GeneralRe: Nice trick! PinmemberRoberto 'Obi-Wan' Colnaghi Junior6-Dec-06 12:43 
GeneralRe: Nice trick! PinmemberAndreas Hollmann16-Feb-07 12:15 
GeneralRe: Nice trick! PinmemberRoberto 'Obi-Wan' Colnaghi Junior7-Mar-07 15:33 
GeneralNeato PinmemberBen Daniel5-Dec-06 19:29 
GeneralRe: Neato PinmemberRoberto 'Obi-Wan' Colnaghi Junior6-Dec-06 12:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150128.1 | Last Updated 7 Mar 2007
Article Copyright 2006 by Roberto Colnaghi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid