Click here to Skip to main content
13,797,304 members
Click here to Skip to main content
Add your own
alternative version


63 bookmarked
Posted 5 Dec 2006
Licenced CPOL


, 7 Mar 2007
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.


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.


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


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 )

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)
    if(!event) event = window.event;                

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

    var w = parseInt(document.getElementById("pixelWidth").value);
    var h = parseInt(document.getElementById("pixelHeight").value);
    var newPixel = document.createElement("div");
    newPixel.className = "pixel"; = 
        "4px solid " +; = cy; = cx; = w + "px"; = h + "px"; = 0;
    var buffer = document.getElementById("renderSurface");

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...)


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.


Some great resources on the Web:


  • 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)


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.

You may also be interested in...

Comments and Discussions

GeneralSimilar thing but this uses server side for the rendering... Pin
Aurelius16643-Sep-09 7:53
memberAurelius16643-Sep-09 7:53 
GeneralPaint! Pin
Daniel Colnaghi5-May-09 10:12
memberDaniel Colnaghi5-May-09 10:12 
GeneralWii Pin
Roberto Colnaghi1-Jan-08 18:44
memberRoberto Colnaghi1-Jan-08 18:44 
Generalcool Pin
Bisogno7-Mar-07 23:58
memberBisogno7-Mar-07 23:58 
GeneralRe: cool Pin
Roberto Colnaghi21-Mar-07 8:27
memberRoberto Colnaghi21-Mar-07 8:27 
GeneralNeater Pin
Ben Daniel7-Mar-07 17:50
memberBen Daniel7-Mar-07 17:50 
GeneralRe: Neater Pin
Roberto Colnaghi21-Mar-07 8:24
memberRoberto Colnaghi21-Mar-07 8:24 
GeneralFound small error Pin
Gert_G16-Feb-07 2:08
memberGert_G16-Feb-07 2:08 
GeneralRe: Found small error Pin
Roberto Colnaghi16-Feb-07 3:19
memberRoberto Colnaghi16-Feb-07 3:19 
GeneralRe: Found small error Pin
Peter.Chan24-Feb-07 4:39
memberPeter.Chan24-Feb-07 4:39 
GeneralRe: Found small error Pin
Roberto Colnaghi7-Mar-07 15:31
memberRoberto Colnaghi7-Mar-07 15:31 
GeneralRe: Found small error Pin
Roberto Colnaghi7-Mar-07 16:58
memberRoberto Colnaghi7-Mar-07 16:58 
GeneralGalo Pin
Lucas Colnaghi7-Feb-07 9:06
memberLucas Colnaghi7-Feb-07 9:06 
GeneralRe: Galo Pin
Roberto Colnaghi7-Feb-07 9:43
memberRoberto Colnaghi7-Feb-07 9:43 
Generalgreat job Pin
Sacha Barber16-Dec-06 3:02
mvpSacha Barber16-Dec-06 3:02 
GeneralRe: great job Pin
Roberto Colnaghi16-Dec-06 6:13
memberRoberto Colnaghi16-Dec-06 6:13 
GeneralNice trick! Pin
Luciano Bargmann6-Dec-06 2:43
memberLuciano Bargmann6-Dec-06 2:43 
GeneralRe: Nice trick! Pin
Roberto Colnaghi6-Dec-06 12:43
memberRoberto Colnaghi6-Dec-06 12:43 
GeneralRe: Nice trick! Pin
Andreas Hollmann16-Feb-07 12:15
memberAndreas Hollmann16-Feb-07 12:15 
GeneralRe: Nice trick! Pin
Roberto Colnaghi7-Mar-07 15:33
memberRoberto Colnaghi7-Mar-07 15:33 
GeneralNeato Pin
Ben Daniel5-Dec-06 19:29
memberBen Daniel5-Dec-06 19:29 
GeneralRe: Neato Pin
Roberto Colnaghi6-Dec-06 12:40
memberRoberto Colnaghi6-Dec-06 12:40 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.181207.3 | Last Updated 7 Mar 2007
Article Copyright 2006 by Roberto Colnaghi
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid