Crop picture with round corners

How can I crop a picture, so it has round corners?

Left picture is the original, right picture is the crop picture:

You add a mask with round corner. I’ll check if I can find some code.

This is from before HiDPI I think:

'Bubble mask, Fill the mask white bubble.Mask.Graphics.ForeColor = rgb(255, 255, 255) bubble.Mask.Graphics.FillRect(0, 0, bubble.Width, bubble.Height) 'Now draw the black rounded rectangle (that will allow the gradient to show through behind) bubble.Mask.Graphics.ForeColor = rgb(0, 0, 0) bubble.Mask.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 10, 10)

How can I do this in a canvas when the logo picture (redhat.png) is a png file?

If I use this in the paint event, I go a black rounded rectangle.

dim bubble as new Picture(128,128)
bubble.Graphics.ForeColor = rgb(255, 255, 255)
bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
bubble.Graphics.ForeColor = rgb(0, 0, 0)
bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)
g.DrawPicture(bubble,0,0)

I can’t test right now but i think you need to load the RedHat.png in to a Picture Object and create the Mask Picture as described above, then apply the Mask to the RedHat Picture.

Thank you for this hint. That’s the solution:

'Bubble mask, Fill the mask white
dim bubble as new Picture(128,128)
bubble.Graphics.ForeColor = rgb(255, 255, 255)
bubble.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
'Now draw the black rounded rectangle (that will allow the gradient to show through behind)
bubble.Graphics.ForeColor = rgb(0, 0, 0)
bubble.Graphics.FillRoundRect(0, 0, bubble.Width, bubble.Height, 20, 20)
dim p as new picture(128,128,24)
p.Graphics.DrawPicture(redhat128,0,0)
p.ApplyMask(bubble)
g.DrawPicture(p,0,0)

is this applicable only for desktop? or I can be use for Web too?

png image file.

You can use this code on any platform except iOS.