Can someone please advise if there is a way to clip a Mousearea to the shape of QML canvas path (not to the whole canvas just to only the shape of the path inside a canvas) or an alternative so that when the mouse enters the Canvas path (or the visible part of the canvas)it can be interactive thanks. I have made a map using a canvas and different parts of the map are represented by different paths below is my code
Canvas{
width: 600
height: 600
x:0;
z: 5
visible: true
clip: false
property string dstrict: "cyan"
onDstrictChanged: requestPaint()
onPaint:mapdrawing();
function mapdrawing(){
var ctx = getContext("2d")
ctx.clearRect(0,0,parent.width,parent.height);
ctx.strokeStyle = "#BED348"
ctx.fillStyle = dstrict
ctx.lineWidth = 1
// #UG-317
ctx.beginPath();
ctx.fillStyle = dstrict
ctx.moveTo(425.834860, 109.202870);
ctx.lineTo(425.834860, 109.202870);
ctx.lineTo(430.094860, 108.892870);
ctx.lineTo(430.074860, 118.362870);
ctx.lineTo(429.244860, 121.872870);
ctx.lineTo(432.804860, 124.472870);
ctx.lineTo(433.964860, 128.072870);
ctx.lineTo(447.124860, 134.482870);
ctx.lineTo(446.954860, 144.952870);
ctx.lineTo(447.644860, 162.022870);
ctx.lineTo(450.154860, 162.972870);
ctx.lineTo(458.394860, 167.412870);
ctx.lineTo(459.444860, 169.732870);
ctx.lineTo(461.754860, 172.362870);
ctx.lineTo(462.974860, 175.292870);
ctx.lineTo(465.344860, 177.242870);
ctx.lineTo(465.604860, 178.492870);
ctx.lineTo(464.164860, 179.332870);
ctx.lineTo(460.964860, 179.402870);
ctx.lineTo(453.274860, 180.332870);
ctx.lineTo(446.584860, 179.542870);
ctx.lineTo(439.774860, 179.462870);
ctx.lineTo(433.464860, 183.022870);
ctx.lineTo(430.444860, 183.912870);
ctx.lineTo(427.234860, 184.122870);
ctx.lineTo(425.014860, 181.082870);
ctx.lineTo(421.894860, 178.782870);
ctx.lineTo(415.054860, 169.542870);
ctx.lineTo(414.064860, 162.012870);
ctx.lineTo(416.964860, 155.052870);
ctx.lineTo(422.294860, 150.062870);
ctx.lineTo(422.304860, 146.462870);
ctx.lineTo(421.554860, 143.312870);
ctx.lineTo(419.994860, 140.642870);
ctx.lineTo(419.584860, 137.522870);
ctx.lineTo(418.904860, 134.722870);
ctx.lineTo(419.074860, 131.612870);
ctx.lineTo(417.614860, 112.802870);
ctx.lineTo(417.224860, 107.092870);
ctx.lineTo(422.784860, 107.672870);
ctx.lineTo(425.834860, 109.202870);
ctx.fill()
ctx.stroke()
ctx.closePath()
}
}
}