Time for action – preparing Canvas for heartbeat visualization

Let's start with simple things by creating a Quick UI project based on the latest version of Qt Quick. Rename the QML file Creator made for us to HeartBeat.qml. Open the qmlproject file that was created with the project and change the mainFile property of the Project object to HeartBeat.qml. Then, you can close the qmlproject document and return to HeartBeat.qml. There, you can replace the original content with the following:

import QtQuick 2.2

Canvas {
  id: canvas

  implicitWidth: 600
  implicitHeight: 300

  onPaint: {
    var ctx = canvas.getContext("2d")
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  }
}

When you run the project, you will see... a blank window.

What just happened?

In the preceding code, we created a basic boilerplate code for using a canvas. First, we renamed the existing file to what we want our component to be called, and then we informed Creator that this document is to...