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();

        public Form1()

        {

            InitializeComponent();

        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)

        {

            lastPoint = e.Location;//we assign the lastPoint to the current mouse position

            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)

                    {

                        Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);

                        pictureBox1.Image = bmp;

                    }

                    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;

                Invalidate();

            }

        }

    }