Why are offsceen bitmaps blurry when drawn onto a CanvasAnimatedControl?

Question

I'm drawing to an offscreen CanvasRenderTarget. I then draw that into my CanvasAnimatedControl.

The copied bitmap is 'blurry'; the first line is the offscreen bitmap, the second line is drawing directly to the session for the CanvasAnimatedControl:

It's not too pronounced, but is much more noticeable when scaling is applied:

Here's the code:

public sealed partial class MainPage
{
    const string Text = "WHY AM I BLURRY!? MMmm///AaBbCcDdEeFf!!££$$%%ZZAA";

    Matrix3x2 _scale = Matrix3x2.CreateScale(3,3);
    
    CanvasRenderTarget _offscreenCanvas;

    readonly CanvasTextFormat _ctf = new CanvasTextFormat
    {
        FontFamily = "Century Gothic",
        FontSize = 20
    };


    public MainPage() => InitializeComponent();

    void onCanvasDraw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args)
    {
        args.DrawingSession.Transform = _scale;

        args.DrawingSession.Clear(Colors.Aquamarine);

        using (var offscreenSession = _offscreenCanvas.CreateDrawingSession())
        {
            offscreenSession.Clear(Colors.Aquamarine);

            offscreenSession.DrawText(Text, 0, 0, Colors.Red, _ctf);
            offscreenSession.DrawLine(new Vector2(0,0), new Vector2(100,10), Colors.Black);
        }

        //args.DrawingSession.DrawImage(_offscreenCanvas, Vector2.Zero, _offscreenCanvas.Bounds, 1f, CanvasImageInterpolation.Linear);
        args.DrawingSession.DrawImage(_offscreenCanvas,0,0);

        args.DrawingSession.DrawText(Text, 0, 20, Colors.Red, _ctf);
        args.DrawingSession.DrawLine(new Vector2(0, 20), new Vector2(100, 30), Colors.Black);

    }

    void onCanvasCreateResources(CanvasAnimatedControl sender, CanvasCreateResourcesEventArgs args) => 
        _offscreenCanvas = new CanvasRenderTarget(sender.Device, 800, 20, 96);
}

Here's the XAML:

<Grid Background="Black">
    <xaml:CanvasAnimatedControl Draw="onCanvasDraw" CreateResources="onCanvasCreateResources" BorderThickness="5" BorderBrush="Blue"/>
</Grid>

What's going wrong?

Update I figured it out but thought this might be a useful reference question

Answer 1

I figured out the answer while writing this question and blogged about it.

Basically, my issue was that I was only scaling the main drawing session and not the offscreen session. The new code is:

    void onCanvasDraw(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args)
    {
        args.DrawingSession.Clear(Colors.Aquamarine);

        using (var offscreenSession = _offscreenCanvas.CreateDrawingSession())
        {
            offscreenSession.Transform = _scale;

            offscreenSession.Clear(Colors.Aquamarine);

            offscreenSession.DrawText(Text, 0, 0, Colors.Red, _ctf);
            offscreenSession.DrawLine(new Vector2(0,0), new Vector2(100,10), Colors.Black);
        }

        args.DrawingSession.DrawImage(_offscreenCanvas, 0,0);

        args.DrawingSession.Transform = _scale;

        args.DrawingSession.DrawText(Text, 0, 20, Colors.Red, _ctf);
        args.DrawingSession.DrawLine(new Vector2(0, 20), new Vector2(100, 30), Colors.Black);

}

Which produces: