CanvasRenderTarget poor rendering quality when drawing ink

Daljit Singh 261 Reputation points
2020-01-20T12:14:16.287+00:00

I have a ScrollViewer which contains a CanvasVirtualControl. My app does the following:

  1. Use an InkCanvas to draw wet ink
  2. Custom dry the ink and render it offscreen on a CanvasRenderTarget
  3. Then draw the appropriate portion the target onto a CanvasVirtualControl
  4. When user pinch zoom, the entire canvas is invalidated, then the DpiScale of the canvas is changed and a new render target is created with the new dpi. Then finally the entire canvas is repainted.

This works ok, but the problem occurs in the fourth step. When I scale the canvas and then invalidate the entire canvas to redraw it again, the rendering quality of the ink strokes is incredibly poor. I notice that if I draw a new ink stroke at a certain zoom level (with appropriate dpi) then the new ink stroke is rendered perfectly fine, but the old ink strokes are rendered poorly.
This is the code that gets called in step 4:

   private void canvasControl_RegionsInvalidated(Microsoft.Graphics.Canvas.UI.Xaml.CanvasVirtualControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasRegionsInvalidatedEventArgs args)  
           {  
               bool createRenderTarget = (this.renderTarget == null);  
     
               if (createRenderTarget)  
               {  
                   this.renderTarget = new CanvasRenderTarget(  
                   this.canvasControl, // the canvasControl has new dpi now  
                   this.canvasControl.Size);  
               }  
               foreach (var region in args.InvalidatedRegions)  
               {  
                   using (var renderSession = renderTarget.CreateDrawingSession())  
                   {  
                       if (createRenderTarget)  
                       {  
                           // have to clear out the render target on first use.  
                           renderSession.Clear(Windows.UI.Colors.Transparent);  
                       }  
                       Debug.WriteLine(updateStrokes.Count);  
                       renderSession.DrawInk(updateStrokes);  
                   }  
                   using (var ds = sender.CreateDrawingSession(region))  
                   {  
                       float opacity = 1.0F;  
                       ds.DrawImage(renderTarget, region, region, opacity, CanvasImageInterpolation.HighQualityCubic);  
                   }  
               }  
           }  

Here is a picture of what I am seeing (the canvas has been zoomed and a new ink stroke is drawn), I noticed that the rendering quality decreases when the user scales down the canvas (and then scale up).
Annotation 2020-01-20 004752

Universal Windows Platform (UWP)
{count} vote

Accepted answer
  1. Daljit Singh 261 Reputation points
    2020-01-22T17:11:42.293+00:00

    It turns out that I was mistakenly draw my strokes each time without first clearing my "wet strokes container". So basically but what happening was that I was drawing the strokes multiple times and obviously the antialiasing suffered from it. If the strokes are drawn once, there is no problem.

    0 comments No comments

0 additional answers

Sort by: Most helpful