title: QML Canvas clipping - non rectangular possible?
body: <p>Is it possible to display non rectangular items in an app?</p>
  
  <p>The top right edge of each element is clipped:</p>
  
  <p><a href="https://i.stack.imgur.com/ePAKe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ePAKe.png" alt="enter image description here"></a></p>
  
  <p>I turned off clipping on the canvas element and set the clipping
  region of the context. I even allowed for the stroke drawing outside
  the path. Here's what I'm using to draw it:</p>
  
  <pre><code>Canvas
  {
      //id: root
      // canvas size
      height: parent.height - 8
      width: height
      anchors.top: parent.top + 4
      clip: false
      z: index + 1
      // handler to override for drawing
      onPaint:
      {
          // get context to draw with
          var ctx = getContext("2d")
          ctx.reset();
  
          // path that includes 1 pixel margin on all sides
          ctx.beginPath()
          ctx.moveTo( 8, 0 )
          ctx.lineTo( width + 4, 0 )
          ctx.lineTo( width - 4, height )
          ctx.lineTo( 0, height )
          ctx.closePath()
          ctx.clip();
  
          // setup the stroke
          ctx.lineWidth = 2
          ctx.strokeStyle = "white"
          ctx.beginPath()
          ctx.moveTo( 9, 1 )
          ctx.lineTo( 9 + width, 1 )
          ctx.lineTo( 1 + width, height - 1 )
          ctx.lineTo( 1, height - 1 )
          ctx.closePath()
          ctx.fillStyle = (roleStatus.toLowerCase().indexOf("success")!==-1) ? "green" : "red"
          ctx.fill()
          ctx.stroke()
      }
  }
  </code></pre>
  
  <p>This will be used on Windows and android.</p>
  
  <p>Thanks</p>