Draw rectangle with corner radius and fit an image bytes to that rectangle with same corne radius

Question

Below I attached my code I need an image with a border and corner radius, please correct my code, and give any other guidelines

CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, cardWidth, cardHeight, dpi);                        
using (CanvasDrawingSession ds = renderTarget.CreateDrawingSession())

                        {

                            ds.Clear(Windows.UI.Colors.White);

                            int photoX = 37;

                                int photoY = 48;

                                int photoWidth = 158;

                                int photoHeight = 158;

                                float cornerRadius = 40;

                                float borderWidth = 3;

                            Rect imageRect = new Rect();

                            byte[] imageBytes = Convert.FromBase64String(memberData.MemberPhotoB64); //image base64

                            using (MemoryStream stream = new MemoryStream(imageBytes))

                            {

							stream.Position = 0;

							imageRect = new Rect(photoX, photoY, photoWidth, photoHeight);

							Rect borderRect = new Rect(imageRect.X - borderWidth / 2,imageRect.Y - borderWidth / 2,imageRect.Width + borderWidth, imageRect.Height + borderWidth);

							ds.FillRoundedRectangle(borderRect, cornerRadius, cornerRadius, Colors.White);

							ds.DrawRoundedRectangle(borderRect, cornerRadius, cornerRadius, Colors.Black, borderWidth); 

							using (IRandomAccessStream randomAccessStream = stream.AsRandomAccessStream())

							{

								CanvasBitmap memberImage = await CanvasBitmap.LoadAsync(device, randomAccessStream);

								ds.DrawImage(memberImage, imageRect);

							}

						}

Answer 1

Hi @Saranya Karthick ,

Welcome to Microsoft Q&A!

It is recommended to use CanvasImageBrush and CanvasDrawingSession.FillRoundedRectangle to draw a RoundedRectangle Image.

CanvasDevice device = CanvasDevice.GetSharedDevice();
CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, 300, 300, 96);
using (var ds = renderTarget.CreateDrawingSession())
{
    ds.Clear(Colors.White);
    int photoX = 5;
    int photoY = 5;
    int photoWidth = 193;
    int photoHeight = 121;
    float cornerRadius = 40;
    float borderWidth = 3;

    Rect imageRect  = new Rect(photoX, photoY, photoWidth, photoHeight);
    Rect borderRect = new Rect(imageRect.X - borderWidth / 2, imageRect.Y - borderWidth / 2, imageRect.Width + borderWidth, imageRect.Height + borderWidth);

    CanvasImageBrush fillBrush;
    CanvasBitmap cb = await CanvasBitmap.LoadAsync(device, new Uri("ms-appx:///Assets/Test.png"));
    fillBrush = new CanvasImageBrush(device, cb);
              
    ds.FillRoundedRectangle(imageRect, cornerRadius, cornerRadius, fillBrush);
    ds.DrawRoundedRectangle(borderRect, cornerRadius, cornerRadius, Colors.Black, borderWidth);
}

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.