JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<canvas id="canv" ></canvas>

JavaScript

let ctx = document.getElementById('canv').getContext('2d');
			let dot_x, dot_y, sec_x1, sec_x2, sec_y1, sec_y2; // координаты точки и концов отрезка соответственно
			let x1, x2, x3, y1, y2, y3; // координаты векторов, построенных на сторонах треугольника
			let out; // расстояние между точкой и отрезком
			let hx, hy, ax, ay; // координаты тоски пересечения перпендикуляра с отрезком и 
			let cnt = 0; // флаг, считающий номер нажатия на канвас
 
			// функция обработки нажатия на канвас
			function storeGuess(event) {
				// записываем координаты точки и рисуем ее
				if (cnt == 0) {
				 	dot_x = event.offsetX;
					dot_y = event.offsetY; 
					ctx.beginPath(); 
					ctx.strokeStyle = "black";
					ctx.moveTo (dot_x, dot_y);
					ctx.lineTo (dot_x + 1, dot_y + 1);
					ctx.stroke();
				}
				// записываем координаты одного из концов отрезка и рисуем точку
				if (cnt == 1) {
					sec_x1 = event.offsetX;
					sec_y1 = event.offsetY;
					ctx.beginPath();
					ctx.moveTo (sec_x1, sec_y1);
					ctx.lineTo (sec_x1 + 1, sec_y1 + 1);
					ctx.stroke();
				}
				// записываем координаты другого конца отрезка; рисуем точку и отрезок
				if (cnt == 2) {
					sec_x2 = event.offsetX;
					sec_y2 = event.offsetY;
 
					ctx.beginPath();
					ctx.moveTo (sec_x2, sec_y2);
					ctx.lineTo (sec_x2 + 1, sec_y2 + 1);
					ctx.stroke();
					ctx.beginPath();
					ctx.strokeStyle = "black";
					ctx.moveTo (sec_x1, sec_y1);
					ctx.lineTo (sec_x2, sec_y2 );
					ctx.stroke();
					det();
				}
				cnt ++;
				cnt %= 3;
 
			}
 
 
			// функция, проверяющая: тупоугольный ли треугольник (с помощью скалярного произведения векторов)
			function IN () { 
				if ( (dot_x - sec_x2) * (sec_x1 - sec_x2) + (dot_y - sec_y2) * (sec_y1 - sec_y2) <= 0) {
					// console.log (2);
					return 0;
				}
				else if ( (dot_x - sec_x1) * (sec_x2 - sec_x1) + (dot_y - sec_y1) * (sec_y2 - sec_y1) <= 0) {
					// console.log (3);
					return 0;
				}
				else return 1;
			}
			IN();
 
			// функция...