Canvas Paint

    The colors are stored in an array and the paint color. When one the user clicks in one of the squares the color of the square is assigned to the paintColor property of the row named colorTools.

    1. Canvas {
    2.     id: canvas
    3.     anchors {
    4.         left: parent.left
    5.         right: parent.right
    6.         top: colorTools.bottom
    7.         bottom: parent.bottom
    8.         margins: 8
    9.     }
    10.     property real lastX
    11.     property real lastY
    13.     onPaint: {
    14.         var ctx = getContext('2d')
    15.         ctx.lineWidth = 1.5
    16.         ctx.strokeStyle = canvas.color
    17.         ctx.beginPath()
    18.         ctx.moveTo(lastX, lastY)
    19.         lastX = area.mouseX
    20.         lastY = area.mouseY
    21.         ctx.lineTo(lastX, lastY)
    22.         ctx.stroke()
    23.     MouseArea {
    24.         id: area
    26.         onPressed: {
    27.             canvas.lastX = mouseX
    28.             canvas.lastY = mouseY
    29.         }
    30.         onPositionChanged: {
    31.             canvas.requestPaint()
    32.         }
    33.     }

    A mouse press stores the initial mouse position into the lastX and lastY properties. Every change on the mouse position triggers a paint request on the canvas, which will result in calling the onPaint handler.