在绘制矩形时，我们提供了一个便捷的接口，而不需要调用stroke或者fill来完成。

3.import QtQuick 2.0
4.
5.Canvas {
6.    id: root
7.    width: 120; height: 120
8.    onPaint: {
9.        var ctx = getContext("2d")
10.        ctx.fillStyle = 'green'
11.        ctx.strokeStyle = "blue"
12.        ctx.lineWidth = 4
13.
14.        // draw a filles rectangle
15.        ctx.fillRect(20, 20, 80, 80)
16.        // cut our an inner rectangle
17.        ctx.clearRect(30,30, 60, 60)
18.        // stroke a border from top-left to
19.        // inner center of the larger rectangle
20.        ctx.strokeRect(20,20, 40, 40)
21.    }
22.}

注意

画笔的绘制区域由中间向两边延展。一个宽度为4像素的画笔将会在绘制路径的里面绘制2个像素，外面绘制2个像素。