In this project, we'll be doing something quite different:

1. As usual, the first step we should do is to create a new project by going to File | New File or Project and selecting Qt Quick Application - Empty as the project template:

2. Once you are done creating the new project, open up main.qml, which is listed under qml.qrc in the project pane. After that, set an ID for the window and adjust its width and height to larger values, like so:

import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: myWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

3. Then, add a Canvas object under myWindow and call it myCanvas. After that, we make its width and height the same as myWindow:

Window {
    id: myWindow
    visible: true
    width: 640
    height: 480
    Canvas {
        id: myCanvas
        width: myWindow.width
        height: myWindow.height
    }
}

5. Next, we define what will happen when the onPaint event is triggered; in this case, we will draw a cross on the window:

Canvas {
    id: myCanvas
    width: myWindow.width
    height: myWindow.height
    onPaint: {
        var context = getContext('2d')
        context.fillStyle = 'white'
        context.fillRect(0, 0, width, height)
        context.lineWidth = 2
        context.strokeStyle = 'black'

6. Let's continue to write the code, like so:

        // Draw cross
        context.beginPath()
        context.moveTo(50, 50)
        context.lineTo(100, 100)
        context.closePath()
        context.stroke()
        context.beginPath()
        context.moveTo(100, 50)
        context.lineTo(50, 100)
        context.closePath()
        context.stroke()
    }
}

7. After that, we add the following code to draw a tick beside the cross:

// Draw tick
context.beginPath()
context.moveTo(150, 90)
context.lineTo(158, 100)
context.closePath()
context.stroke()
context.beginPath()
context.moveTo(180, 100)
context.lineTo(210, 50)
context.closePath()
context.stroke()

8. Then, draw a triangle shape by adding the following code:

// Draw triangle
context.lineWidth = 4
context.strokeStyle = "red"
context.fillStyle = "salmon"
context.beginPath()
context.moveTo(50,150)
context.lineTo(150,150)
context.lineTo(50,250)
context.closePath()
context.fill()
context.stroke()

9. After that, draw a half circle and a full circle with the following code:

// Draw circle
context.lineWidth = 4
context.strokeStyle = "blue"
context.fillStyle = "steelblue"
var pi = 3.141592653589793
context.beginPath()
context.arc(220, 200, 60, 0, pi, true)
context.closePath()
context.fill()
context.stroke()

10. Then, we draw an arc:

context.beginPath()
context.arc(220, 280, 60, 0, 2 * pi, true)
context.closePath()
context.fill()
context.stroke()

11. Finally, we draw a 2D image from a file:

// Draw image
context.drawImage("tux.png", 280, 10, 150, 174)

12. However, the preceding code alone will not successfully render an image onscreen because you must also load the image file beforehand. Add the following code within the Canvas object to ask QML to load the image file when the program is started, then call the requestPaint() signal when the image is loaded so that the onPaint() event slot will be triggered:

onImageLoaded: requestPaint();
onPaint: {
    // The code we added previously
}

13. Then, open up qml.qrc by right-clicking it on the project panel, and select Open in Editor. After that, add the tux.png image file into our project resource:

14. Build and run the program now, and you should get the following result:

Isn't that wonderful?