title: How to rotate a rectangle in Win2D
body: <p>I'm looking for a way to rotate a rectangular image (or any image for that matter) around its center point using Win2D.</p>
  
  <p>This snippet is from within the OnDraw method for the Win2D canvas:</p>
  
  <pre><code>var redBitMap = _images[1];
  var yellowBitMap = _images[2];
  
  var rect = new Rect(topLeft.X, topLeft.Y, _width, _height);
  _drawingSession.DrawImage(redBitMap, rect);
  
  ICanvasImage image = new Transform2DEffect
  {
     Source = yellowBitMap,
     TransformMatrix = Matrix3x2.CreateRotation((float)(60 * Math.PI / 180)),
  };
  var sourceRect = image.GetBounds(_drawingSession);
  _drawingSession.DrawImage(image, rect), sourceRect, 1, CanvasImageInterpolation.HighQualityCubic);
  </code></pre>
  
  <p>This method gives me my image rotated by 60 degrees, but the image ends up being drawn at the wrong coordinates, skewed and smaller than the intended image.</p>
  
  <p>Interestingly enough, if I change the size of the rectangle so that it is square (making the height the same as the width), the image is no longer skewed.</p>
  
  <p><a href="https://i.stack.imgur.com/STvYe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/STvYe.jpg" alt="Yellow hex over Red hex"></a></p>
  
  <p>After giving it more thought, here is what is happening:
  <a href="https://i.stack.imgur.com/Hij1u.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hij1u.jpg" alt="Actually happening"></a></p>
  
  <p>So, the yellow rectangle represents the image I want to rotate (on center) by 60 degrees.  The red rectangle that is anchored to the top left corner is what is happening when I rotate it.  The big blue box is the new rectangle created that is determined by the image.GetBounds statement.  </p>
  
  <p>When I try to draw the image back to the original coordinates, you can see from the right hand image that it's causing the image to be both skewed and shrunk because the source rectangle is no longer the same size or shape as the target rectangle.</p>
  
  <p>If my geometry skills were better, I could surely calculate the bounds of the new rectangle and apply them to the correct location back onto the canvas.  But alas, it's been too many years since high-school math for me.  On a one-off calculation, I'm sure I could figure it out - but not when the shape of the source image might change.</p>