Title: Let the user scribble on a PictureBox in C#

The Graphics class provides a DrawLines method that draws a series of connected lines, which is sometimes called a polyline. This program lets the user create a series of polylines.

The program stores the points that make up a polyline as a List<Point>. It stores a series of polylines in a List<List<Point>>. It keeps track of the new polyline that the user is drawing in the variable NewPolyline.

// The polylines we draw. private List<List<Point>> Polylines = new List<List<Point>>(); // The new polyline we are drawing. private List<Point> NewPolyline = null;

When the user presses the mouse down, the following code creates a new polyline.

// Start drawing. private void picCanvas_MouseDown(object sender, MouseEventArgs e) { // Create the new polyline. NewPolyline = new List<Point>(); Polylines.Add(NewPolyline); // Add the first point. NewPolyline.Add(e.Location); }

This code the NewPolyline list and then adds the mouse's position to it.

When the user moves the mouse, the following code adds the mouse's new location to the new polyline.

// Continue drawing. private void picCanvas_MouseMove(object sender, MouseEventArgs e) { if (NewPolyline == null) return; NewPolyline.Add(e.Location); picCanvas.Refresh(); }

This code checks whether the user is making a new polyline by checking whether NewPolyline == null. If there is a new polyline, the code adds the mouse's current location to the new polyline and refreshes the PictureBox to draw it as it is so far.

When the user releases the mouse, the following code removes the new polyline if it contains only a single point.

// Stop drawing. private void picCanvas_MouseUp(object sender, MouseEventArgs e) { if (NewPolyline == null) return; // See of the new polyline contains more than 1 point. if (NewPolyline.Count < 2) { // Remove it. Polylines.RemoveAt(Polylines.Count - 1); } NewPolyline = null; picCanvas.Refresh(); }

The only other interesting piece of code in this example is the PictureBox's Paint event handler, which draws the polylines.

// Redraw. private void picCanvas_Paint(object sender, PaintEventArgs e) { e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; e.Graphics.Clear(picCanvas.BackColor); // Draw the polylines. foreach (List<Point> polyline in Polylines) { e.Graphics.DrawLines(Pens.Black, polyline.ToArray()); } }

This code sets the Graphics object's SmoothingMode to draw smooth lines. It then loops through the polylines and draws them.

Download the example to experiment with it and to see additional details.