Images

The QML canvas supports image drawing from several sources. To use an image inside the canvas the image needs to be loaded first. We use the Component.onCompleted handler to load the image in our example below.

  1. onPaint: {
  2.     var ctx = getContext("2d")
  4.     // draw an image
  5.     ctx.drawImage('assets/ball.png', 10, 10)
  7.     // store current context setup
  8.     ctx.save()
  9.     ctx.strokeStyle = '#ff2a68'
  10.     // create a triangle as clip region
  11.     ctx.beginPath()
  12.     ctx.moveTo(110,10)
  13.     ctx.lineTo(155,10)
  14.     ctx.lineTo(135,55)
  15.     ctx.closePath()
  16.     // translate coordinate system
  17.     ctx.clip()  // create clip from the path
  18.     // draw image with clip applied
  19.     ctx.drawImage('assets/ball.png', 100, 10)
  20.     // draw stroke around path
  21.     ctx.stroke()
  22.     // restore previous context
  23.     ctx.restore()
  25. }
  27. Component.onCompleted: {
  28.     loadImage("assets/ball.png")
  29. }

The left shows our ball image painted at the top-left position of 10x10. The right image shows the ball with a clipping path applied. Images and any other path can be clipped using another path. The clipping is applied by defining a path and calling the clip() function. All following drawing operations will now be clipped by this path. The clipping is disabled again by restoring the previous state or by setting the clip region to the whole canvas.

image