Drawing a second RenderTarget2D to the back buffer overwrites the first one

Question

My problem is that I'm trying to get two different RenderTarget2Ds drawn to the screen, but only the last-drawn one is shown. The code is similar to the following, and gets called twice, once by each instance of a class that needs to be drawn with the Draw method:

public override void Draw()
{
  gfxDevice.SetRenderTarget(myRenderTarget);
  gfxDevice.Clear(Thistle);

  //pseudocode
  foreach (something in a list)
  { spritebatch.begin();
    spritebatch.DrawString(something);
    spritebatch.end();
  }

  //reset to the backbuffer 
  gfxDevice.SetRenderTarget(null);
  gfxDevice.Clear(backgroundColor)  //Here is what I thought the offending line was


  //draw the RenderTarget to backbuffer
  spriteBatch.Begin();
  spriteBatch.Draw(myRenderTarget, rect, this.backgroundColor);
  spriteBatch.End();

What I thought would be the solution is to stop clearing the graphicsDevice each time the Draw() method gets called, but if I don't, everything but the freshly drawn rendertarget gets drawn an ugly purple. Like this:

The purple results from End()ing the spritebatch, I think, thanks to this question

What do I need to change in order for both RenderTargets get drawn properly, meaning both widgets get drawn, along with the proper Color.Thistle background?

Ideally, the screen would look like a combination of both: and

Answer 1

You're correct that you need to remove the gfxDevice.Clear(backgroundColor) call. If you draw to the backbuffer, and then clear the backbuffer, then obviously anything you drew before clearing isn't going to show up!

You want to clear the backbuffer before rendering anything, i.e. at the beginning of the frame.

EDIT

After taking a more thorough look at the source code provided, I think I know what's actually going on here--it's one of the tricky things about using render targets.

The weird purple you're seeing is not, in fact, caused by SpriteBatch.End(). That's the color that render targets are automatically cleared to when XNA resets their memory.

When does XNA clear out a render target's memory? Whenever that render target is set onto the graphics device as an active target. So whenever you call SetRenderTarget(null), XNA is obliterating the backbuffer's memory and resetting it to that lovely purple.

To avoid this, you need to draw all of your render targets before drawing anything to the backbuffer. Then, set the backbuffer as your active render target, and draw all of the render targets you updated previously in a single pass.