Relax Breath of Solution.

I have faced a problem when i tried to have a canvas with rounded corner and having an image. I doesn’t want to make the rounded corners in image as the content is going to be scaled. After doing some research on Net i found a good solution to the problem. it is a kind of trick where you put the rounded corner canvas as a mask on your image and it works perfectly . Following is the code for the same

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Image source="../bin-debug/assets/bg.jpg" x="10" y="10" mask="{maskCanvas}" height="80%" width="80%" maintainAspectRatio="false" />
<mx:Canvas id="maskCanvas" x="10" y="10" width="80%" height="80%" cornerRadius="10" borderStyle="solid">
</mx:Canvas>
</mx:Application>

Do remember to create an asset folder having a “bg.jpg” image when trying this solution.