Keep Picturebox Image While Painting on top of it

Question

In my form, I have a picturebox. I wanted to be able to draw arrows on top of an image. I managed to get halfway there. On the Form load event, I assign an image to the picturebox. I'm able to create arrows with the code below. The problem is every time I create the arrow the picture I assigned on my form load event gets erased. Why does my image get erased? How do I maintain my image that I assigned on form load while drawing arrows on top of it?

    private bool isMoving = false;
    private Point mouseDownPosition = Point.Empty;
    private Point mouseMovePosition = Point.Empty;
    private List<Tuple<Point, Point>> lines = new List<Tuple<Point, Point>>();
    Pen _Pen;

    private void Test_Load(object sender, EventArgs e)
    {
        pictureBox1.Image = Properties.Resources.background;          
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {

        if (isMoving)
        {
            if (pictureBox1.Image == null)
            {
                Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
                using (Graphics g = Graphics.FromImage(bmp))
                {
                    g.Clear(Color.White);
                }
                pictureBox1.Image = bmp;
            }

            using (Graphics g = Graphics.FromImage(pictureBox1.Image))
            {
                g.Clear(pictureBox1.BackColor);

                AdjustableArrowCap bigArrow = new AdjustableArrowCap(5, 5);
                _Pen = new Pen(Color.IndianRed, 3);
                _Pen.CustomEndCap = bigArrow;
                g.DrawLine(_Pen, mouseDownPosition, mouseMovePosition);
                _Pen.Dispose();
            }
        }
    }



    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        isMoving = true;
        mouseDownPosition = e.Location;
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        if (isMoving)
        {
            mouseMovePosition = e.Location;
            pictureBox1.Invalidate();
        }
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        if (isMoving)
        {
            lines.Add(Tuple.Create(mouseDownPosition, mouseMovePosition));
        }
        isMoving = false;
    }

I think the problem is with this line here g.Clear(pictureBox1.BackColor);

Answer 1

Yes, problem is with this line here g.Clear(pictureBox1.BackColor); You erase entire the control area before you draw the line.

You should draw to e.Graphics directly:

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    if (isMoving)
    {
        if (pictureBox1.Image == null) e.Graphics.Clear(Color.White);

        // Add this line for high quality drawing:
        e.Graphics.SmoothingMode = SmoothingMode.HighQuality;

        AdjustableArrowCap bigArrow = new AdjustableArrowCap(5, 5);
        _Pen = new Pen(Color.IndianRed, 3);
        _Pen.CustomEndCap = bigArrow;
        e.Graphics.DrawLine(_Pen, mouseDownPosition, mouseMovePosition);
        _Pen.Dispose();
    }
}