CanvasRenderingContext2D.isPointInStroke()

CanvasRenderingContext2D.isPointInStroke() - чи знаходиться точка на контурі.

Синтаксис:

ctx.isPointInStroke( x, y );

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - координати осі X.

y - координати ось Y.

Опис:

isPointInStroke() метод об'єкту CanvasRenderingContext2D який перевіряє чи знаходиться вказана точка на поточному конторі полотна canvas. Повертає логічне значення: true або false.

isPointInStroke перевіряє чи є вказана точка на сомому контурі, на відміно від isPointInPath() який перевіряє чи є вказана точка в середині (в області) контура.

Приклад:

 var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");

crt.beginPath();
crt.moveTo(20,20);
crt.lineTo(40, 20);
crt.lineTo(40, 40);
crt.lineTo(20, 40);
crt.closePath();

var b = crt.isPointInStroke(40, 40);

alert(b); // true
console.log( crt.isPointInStroke(21, 40) ); //true
console.log( crt.isPointInStroke(26, 26) ); //false

 var canvas= document.getElementById("myCanvas");
crt = canvas.getContext("2d");
canvas.onclick=function(e){
   document.getElementById("test").innerHTML="<b>isPointInPath("+e.offsetX+", "+e.offsetY+")</b> = "+crt.isPointInPath(e.offsetX, e.offsetY) + " <b>isPointInStroke("+e.offsetX+", "+e.offsetY+")</b> = "+crt.isPointInStroke(e.offsetX, e.offsetY);
}
crt.strokeStyle="red";
crt.rect(25, 25, canvas.width-50, canvas.height-50);
crt.stroke();

Приклад різниці між isPointInStroke() і isPointInPath:

 var canvas= document.getElementById("myCanvas");
crt = canvas.getContext("2d");
canvas.onclick=function(e){
   document.getElementById("test").innerHTML="<b>isPointInPath("+e.offsetX+", "+e.offsetY+")</b> = "+crt.isPointInPath(e.offsetX, e.offsetY) + " <b>isPointInStroke("+e.offsetX+", "+e.offsetY+")</b> = "+crt.isPointInStroke(e.offsetX, e.offsetY);
}
crt.strokeStyle="red";
crt.rect(25, 25, canvas.width-50, canvas.height-50);
crt.stroke();