Freelance Web Developer

Jan 14, 2010

Draw with jquery

UPDATE - You must check the Drawing on web with canvas and JQuery

In this post I want to explain " How to Draw with jquery on web page? like msPaint brush". I had implemented this just for fun!
There are a lot of good plugins of jquery to draw basic geometric shapes like rectangles, circles etc.

But i found no one that allow me to draw as we draw in msPaint (or other drawing tools). I tried to implement this.

The idea

I started with a simple logic - to draw colored elements(spans) following mouse location on mousemove. Then used a flag to implement it with mouse drag, flag=true(on mousedown) and flas=false(on mouseup).


The Javascript

 $(document).ready(function() {
 var draw false;

 //set it true on mousedown

 //reset it on mouseup

 $(document).mousemove(function(e) {

    //if mouse is down

                //make a pixel (5X5) at mouse position
                pointer = $('<span>').css({
                                                tope.pageY ,    //offsets
                                                lefte.pageX   //offsets

                //append it to body



Its time to a test drive. Open the demo and drag your mouse.
You can see it in action here.

UPDATE - You must check the Drawing on web with canvas and JQuery

Labels: , , ,

If anything helps, feel free to buy me a beer.

By :