[Interest] Canvas keeping artifacts

[Jason H]

I have a very simple pause button:
	Canvas {
		id: pauseCanvas
		anchors.fill: parent
		onWidthChanged: requestPaint()
		onHeightChanged: requestPaint()
		onPaint: {
			var ctx = getContext('2d');
			ctx.save()
			ctx.clearRect(0,0, width,height)
			ctx.fillStyle = color;
			ctx.rect(0.125*width, 0.05*height, 0.25*width, 0.90*height);
			ctx.fill();
			ctx.rect(0.625*width, 0.05*height, 0.25*width, 0.90*height);
			ctx.fill();
			ctx.restore();
		}
	}

The problem is when I resize the window (which in turn resizes the canvas), I get artifacts of previous draws. If the window is made larger (corner drag or maximize) I can see the smaller original rectangles. And vice-versa. 

How can I get Canvas to play nice?