title: Scaling Canvas InkStrokes
body: <p>I am taking a photo with the camera, using it as the background for an InkCanvas, and letting the user draw overtop. </p>
  
  <p>When the user saves their drawing, I am scaling the drawing to match the size of the image in the background. I can not resize the original image. </p>
  
  <p>However, while the length and position of the strokes are being scaled, the widths are not. 
  Scrolling through StackOverflow I have found people saying that you also need to set the scale on the <code>InkStroke.DrawingAttributes.PenTipTransform</code> as well as the <code>InkStroke.PointTransform</code>, but when I try to set the value to the scale, the value doesn't change.</p>
  
  <p>Origional Values
  <a href="https://i.stack.imgur.com/kF8Rg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kF8Rg.png" alt="Origional"></a>
  New Values
  <a href="https://i.stack.imgur.com/w1yyr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w1yyr.png" alt="New Values"></a></p>
  
  <p>Any information on how I can set this value, or another way to o the same thing would be greatly appreciated.</p>
  
  <p>Thanks</p>
  
  <p>UI Code</p>
  
  <pre><code> &lt;!-- Canvas --&gt;
      &lt;Image Grid.Row="1" x:Name="imgImage" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" SizeChanged="imgImage_SizeChanged"/&gt;
  
      &lt;InkCanvas Grid.Row="1" x:Name="inkCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" PointerExited="inkCanvas_PointerExited" Visibility="Collapsed"&gt;
          &lt;InkCanvas.RenderTransform&gt;
              &lt;ScaleTransform x:Name="inkCanvasScaleTransform" /&gt;
          &lt;/InkCanvas.RenderTransform&gt;
      &lt;/InkCanvas&gt;
  </code></pre>
  
  <p>EDIT - More information</p>
  
  <p>The image taken by the camera has the resolution 3264x244, the user can then draw on the image with the canvas, but I can't show the entire image on the screen, so it gets scaled down to fit the size of the canvas. The canvas (in this particular case), has a resolution of 1012x759.</p>
  
  <p>When the image is saved, the location of the draw gets scaled up to match the full size of the image. but the width of the stroke does not. </p>
  
  <p>P.S. the scale transform in the XAML is currently not used. </p>
  
  <p>SAVE CODE</p>
  
  <pre><code>StorageFile inputFile = null;
          inputFile = await StorageFile.GetFileFromPathAsync(_image.fullPath);
          height = (int)inkCanvas.ActualHeight;
          width = (int)inkCanvas.ActualWidth;
          double scalex = 0;
          double scaley = 0;
          double offsety = 0;
          double offsetx = 0;
          double widthscale = 1;
          if (inputFile != null)
          {
              var prop = await inputFile.Properties.GetImagePropertiesAsync();
              offsetx = (double)prop.Width - width;
              offsety = (double)prop.Height - height;
              scalex = ((double)prop.Width - width) / width;
              scaley = ((double)prop.Height - height) / height;
              width = (int)prop.Width;
              height = (int)prop.Height;
              widthscale = 1 + ((scalex * scaley) / 2);
          }
  
          var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
          List&lt;InkStroke&gt; ExpandedStrokes = new List&lt;InkStroke&gt;();
          foreach (var stroke in strokes)
          {
              InkStroke strk = stroke.Clone();
              Matrix3x2 scaleMatrix = Matrix3x2.CreateScale(1 + (float)scalex, 1 + (float)scaley);
              strk.PointTransform = scaleMatrix;
              strk.DrawingAttributes.PenTipTransform = scaleMatrix;
              ExpandedStrokes.Add(strk);
          }
  
          StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
          CanvasDevice device = CanvasDevice.GetSharedDevice();
          CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, width, height, 96);
          using (var ds = renderTarget.CreateDrawingSession())
          {
              ds.Clear(Colors.White);
              if (inputFile != null)
              {
                  using (CanvasBitmap image = await CanvasBitmap.LoadAsync(device, inputFile.Path, 96))
                  {
                      ds.DrawImage(image);
                  }
              }
              ds.DrawInk(ExpandedStrokes);
          }
          using (var fileStream = await inputFile.OpenAsync(FileAccessMode.ReadWrite))
          {
              await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f);
          }
  </code></pre>
  
  <p>The scale for the PenTip may not be correct, but was just trying to get it making a change.</p>
  
  <p>EXAMPLE IMAGES</p>
  
  <p>Before Scaling (1012x759)
  <a href="https://i.stack.imgur.com/mWbYG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mWbYG.jpg" alt="Before Scaling"></a></p>
  
  <p>After Scaling (3264x2448)
  <a href="https://i.stack.imgur.com/19Vg8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19Vg8.jpg" alt="After Scaling"></a></p>