Drawing by mouse on a PictureBox (Freehand drawing)

Brief overview of GDI+: Graphics Device Interface + (GDI+) is a graphical subsystem of Windows that consists of an application programming interface (API) to display graphics and formatted text on both video display and printer.
GDI+ acts as an intermediate layer between applications and device drivers for rendering two-dimensional graphics, images and text.

Suppose we wanted to create a sort of painting/freehand writing program that uses the mouse to draw. We can do this in .Net by first creating a Windows Forms application and then making a picturebox like so (adding a button to clear the picturebox is optional):

The code (in C#) is relatively simple to write. Theres many ways to accomplish freehand drawing by mouse, so this is just one way. The algorithm goes like this:

  1. First, create the event handlers for the picture box: MouseDown, MouseMove, & MouseUp
  2. Create a previous Point object to store the current mouse position so that the any previous point will equal whatever position the mouse is on the picturebox (x,y coordinates)
  3. Create a boolean to detect whether the mouse button is currently pressed
  4. Create a Bitmap so that you have something to write/paint on if there is no existing Image/Bitmap on the picturebox
  5. Once you’ve created a bitmap, create a Graphics object to draw with, we will use the DrawLine() function, it takes a Pen object, a starting Point, and an ending Point

The sample code in C#:

public partial class Form1 : Form


        Point lastPoint = Point.Empty;//Point.Empty represents null for a Point object

        bool isMouseDown = new Boolean();//this is used to evaluate whether our mousebutton is down or not

        public Form1()




        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)


            lastPoint = e.Location;//we assign the lastPoint to the current mouse position: e.Location ('e' is from the MouseEventArgs passed into the MouseDown event)

            isMouseDown = true;//we set to true because our mouse button is down (clicked)


        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)


            if (isMouseDown == true)//check to see if the mouse button is down


                if (lastPoint != null)//if our last point is not null, which in this case we have assigned above


                    if (pictureBox1.Image == null)//if no available bitmap exists on the picturebox to draw on

                        //create a new bitmap
                        Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);

                        pictureBox1.Image = bmp; //assign the picturebox.Image property to the bitmap created


                    using (Graphics g = Graphics.FromImage(pictureBox1.Image))

                    {//we need to create a Graphics object to draw on the picture box, its our main tool

                 //when making a Pen object, you can just give it color only or give it color and pen size

                        g.DrawLine(new Pen(Color.Black, 2), lastPoint, e.Location);
                        g.SmoothingMode = SmoothingMode.AntiAliasing;
                   //this is to give the drawing a more smoother, less sharper look


                    pictureBox1.Invalidate();//refreshes the picturebox

                    lastPoint = e.Location;//keep assigning the lastPoint to the current mouse position




        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)


            isMouseDown = false;

            lastPoint = Point.Empty;

           //set the previous point back to null if the user lets go of the mouse button


        private void clearButton_Click(object sender, EventArgs e)//our clearing button


            if (pictureBox1.Image != null)


                pictureBox1.Image = null;





If you think this post is great, please rate or comment on it. Thanks!


3 thoughts on “Drawing by mouse on a PictureBox (Freehand drawing)

  1. Very interesting. I want coding use visual c++, but i dont know how write /convert code Point lastPoint = Point.Empty; to visual.c++


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s