Rectangle {
		x: 0
		y: 0
		width: 200
		height: 200
		border.color: "green"
		border.width: 1

		Canvas {
			anchors.fill: parent
			property var p1;
			property var p2;

			onPaint: {
				var ctx = getContext("2d");
				ctx.reset();
				ctx.lineJoin = "round";
				ctx.lineCap = "round";
				ctx.strokeStyle = "red";
				ctx.fillStyle = "blue";
				ctx.lineWidth = 1;

				p1 = ctx.beginPath();
				ctx.moveTo(10,10);
				ctx.lineTo(90,10);
				ctx.lineTo(90,90);
				ctx.lineTo(10,90);
				ctx.closePath();
				ctx.stroke();
				ctx.fill()

				ctx.strokeStyle = "green";
				ctx.fillStyle = "yellow";
				p2 = ctx.beginPath();
				ctx.moveTo(110,110);
				ctx.lineTo(190,110);
				ctx.lineTo(190,190);
				ctx.lineTo(110,190);
				ctx.closePath();
				ctx.stroke();
				ctx.fill()
			}

			MouseArea {
				anchors.fill: parent
				onClicked: function(mouse) {
					console.log("Mouse at "+mouse.x+", "+mouse.y);
					if (parent.p1) {
						console.log("Have p1: "+parent.p1);
						if (parent.p1.isPointInPath(mouse.x, mouse.y)) {
							console.log("Hit the red/blue box");
						}
					} else {
						console.log("Path p1 not set");
					}

					if (parent.p2) {
						console.log("Have p2: "+parent.p2);
						if (parent.p2.isPointInPath(mouse.x, mouse.y)) {
							console.log("Hit the yellow/green box");
						}
					} else {
						console.log("Path p2 not set");
					}

					if (parent.p1 === parent.p2) {
						console.log("Paths are the same"); // <-- this happens, but should not
					}
				}
			}
		}
	}