Transparent picture box on top of another picture box is not working. How to fix this?

Question

I want to create two picture boxes, overlapping. The first Picturebox is used as the background, the picture of the screen. using this method:

public void BckShow()
{
     Rectangle rect = Screen.GetBounds(this);
     gBackImg = Graphics.FromImage(bBackImg);
     gBackImg.CopyFromScreen(0,0,0,0,
               Screen.PrimaryScreen.Bounds.Size,
               CopyPixelOperation.SourceCopy);
}

The second picturebox is above the first one, a transparent picture box that can be drawn using this mouse event:

public void Draw(bool draw, Point sp, Point ep)
        {
            if (draw)
            {
                gCanvas.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
                pen = new Pen(new SolidBrush(ColorName), BrushSize);
                if (toolPen.Checked)
                {
                    gCanvas.DrawLine(pen, sp, ep);
                }
                else if (toolEreser.Checked)
                {
                    Rectangle rect = new Rectangle(ep.X, ep.Y, BrushSize*5, BrushSize*5);
                    gCanvas.DrawEllipse(pen, rect);
                    gCanvas.FillEllipse(new SolidBrush(ColorName), rect);
                }
                bCanvas.MakeTransparent(Color.White);
                pbxCanvas.Refresh();
                dirty = true;
                toolSave.Enabled = true;
            }
        }

        private void pbxCanvas_MouseDown(object sender, MouseEventArgs e)
        {
            sp = e.Location;
            if (e.Button == MouseButtons.Left)
            {
                ActivePaint = true;
            }
        }

        private void pbxCanvas_MouseUp(object sender, MouseEventArgs e)
        {
            ActivePaint = false;
        }

        private void pbxCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            ep = e.Location;
            Draw(ActivePaint, sp, ep);
            sp = ep;
        }

but when i run the program, the second PictureBox does not draw anything when the mouse event was fired. how i can fix this?

I do this because I just want to save the image in the second picture box. Unlike PrintScreen but seemed to make notes on the screen and save the image apart from the screen image.

Is there another way to do this? like using controls other than picture box, or may directly use the screen as a background but still can save the image in the transparent PictureBox separately.

This is the example I want to achieve:

when drawing:

results stored images:

I hope you all will help me to fix this. sorry for poor explanation.

this the document outline window for more detail:

Answer 1

It's likely that your surface being overdrawn by refresh. You should be tracking what you want to draw, and then drawing it in the picture box's Paint event. That way, you get handed a Graphics object and every refresh, you're drawing.

That's assuming, of course, that you have a valid, and correct, Graphics object in the first place.

BTW: passing a form-scope variable to Draw is confusing, just use it.

Answer 2

Check your gCanvas initializer, if it is used from within Paint event (e.Graphics), then your changes are lost when you call the Refresh() method. Refresh() causes a new Paint event to be fired, creating a new Graphics object and therefore invalidating yours. Create a new graphics object from your PictureBox's Image to persist your changes permanently.

private List<Point> points = new List<Point>();

private void pbxCanvas_MouseDown(object sender, MouseEventArgs e) {
    if (e.Button == MouseButtons.Left) {
        ActivePaint = true;
    }
}

private void pbxCanvas_MouseUp(object sender, MouseEventArgs e) {
    ActivePaint = false;
    points.Clear();
}

private void pbxCanvas_MouseMove(object sender, MouseEventArgs e) {
    if (ActivePaint) {
        points.Add(e.Location);
        Refresh();
    }
}

private void pbxCanvas_Paint(object sender, PaintEventArgs e) {
    using (var graphics = Graphics.FromImage(pbxCanvas.Image)) {
        for (int i = 0; i < points.Count - 1; i++) {
            graphics.DrawLine(Pens.Black, points[i], points[i + 1]);
        }
    }
}