title: Saving Canvas to Image File saves Blank Black Image
body: <p>For starters, I'm still new with UWP and XAML.
  I've made a simple code on my uwp where I have a canvas (named it "ImageHolder") and there is an image and textblock inside it.
  My main problem is that whenever I try to use RenderTargetBitmap inorder to save the canvas into an image file, it outputs a black blank image.
  Here is my XAML code:</p>
  
  <pre><code>&lt;Page
  x:Class="SaveAndRetreiveMap.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:SaveAndRetreiveMap"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
  mc:Ignorable="d"&gt;
  
  &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
  
      &lt;Line x:Name="dot" Stroke="Black" StrokeThickness="5" Fill="Black"&gt;&lt;/Line&gt;
  
      &lt;TextBox x:Name="xValue" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="89,415,0,0" Background="Azure"/&gt;
      &lt;TextBox x:Name="yValue" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="89,452,0,0" Background="Azure"/&gt;
      &lt;TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="55,420,0,0" TextWrapping="Wrap" Text="X:" VerticalAlignment="Top" FontSize="20"/&gt;
      &lt;TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="55,455,0,0" TextWrapping="Wrap" Text="Y:" VerticalAlignment="Top" FontSize="20"/&gt;
      &lt;Button x:Name="PlotButton" Content="Plot Points" HorizontalAlignment="Left" Margin="62,496,0,0" VerticalAlignment="Top" Click="PlotButton_Click"/&gt;
  
      &lt;Canvas Name="ImageHolder"  Height="206" Width="226" Margin="356,160,918,634"&gt;
  
          &lt;Image x:Name="image" HorizontalAlignment="Left" Height="206" VerticalAlignment="Top" Width="226"/&gt;
          &lt;TextBlock Text="Johnny!" Margin="44,89,-44,-89"&gt;&lt;/TextBlock&gt;
          &lt;Button x:Name="button" Content="Save" HorizontalAlignment="Left" VerticalAlignment="Top" Click="button_Click" Canvas.Left="-133" Canvas.Top="335"/&gt;
      &lt;/Canvas&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>My CS code:</p>
  
  <pre><code>        private async void button_Click(object sender, RoutedEventArgs e)
          {
          RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
          await renderTargetBitmap.RenderAsync(ImageHolder);
  
          var picker = new FileSavePicker();
          picker.FileTypeChoices.Add("JPEG Image", new string[] { ".jpg" });
          StorageFile file = await picker.PickSaveFileAsync();
          if (file != null)
          {
              var pixels = await renderTargetBitmap.GetPixelsAsync();
  
              using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
              {
                  var encoder = await
  
                  BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
                  byte[] bytes = pixels.ToArray();
                  encoder.SetPixelData(BitmapPixelFormat.Bgra8,
                                       BitmapAlphaMode.Ignore,
                                       (uint)ImageHolder.Width, (uint)ImageHolder.Height,
                                       96, 96, bytes);
  
                  await encoder.FlushAsync();
              }
          }
      }
  </code></pre>
  
  <p><strong>Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/dKhJb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dKhJb.png" alt="Output"></a></p>
  
  <p>I'm still really new at UWP, and a small help would really be appreciated. :)</p>