title: How to apply blur effect only outside of a widget?
body: <p>I am trying to create a ui for cropping images. I want to apply blur effect outside of the selection area.</p>
  
  <p><a href="https://i.stack.imgur.com/4qqET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4qqET.png" alt="blur"></a></p>
  
  <p>In the picture above, area 1 is the selection area. I want to make it centered when this ui initialized. Then user resizes and moves it on the image. And I will use the latest location and size to crop the image.</p>
  
  <p>Is there any way to achieve this by using widgets? I did this with canvas but I would do it with widgets if it's possible.</p>