JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<canvas id="lienzo"></canvas>
<div id="log"></div>

JavaScript

window.onload=function(){
    var canvas=document.getElementById("lienzo");
    var logDiv=document.getElementById("log");
    var ctx=canvas.getContext("2d");
    canvas.width=400;
    canvas.height=300;
    canvas.style.backgroundColor="black";
    
    var poligono=[
        {x:200, y:50},
        {x:80, y:150},
        {x:120, y:250},
        {x:280, y:250},
        {x:320, y:150}    
    ];
    
    var punto={x:200, y:150 };
    
    function log(txt) { logDiv.innerHTML=txt; }
    function dibujarPoligono(vertices){
        var n=vertices.length;
        ctx.beginPath();
        ctx.lineWidth=3;
        ctx.strokeStyle="red";
        ctx.moveTo(vertices[n-1].x,vertices[n-1].y);
        for (var i=0; i<n; i++)
        {         
            ctx.lineTo(vertices[i].x,vertices[i].y);
        }
        ctx.stroke();
        
    }
    function dibujarPunto(coordenada){
        ctx.beginPath();
        ctx.arc(coordenada.x,coordenada.y,1,0,(Math.PI/180)*360,true);
        ctx.strokeStyle = "yellow";
        ctx.lineWidth = 3;
        ctx.stroke();
    }
    
    function colisionPuntoPoligono(vertices, coordenada){
        var i, j, c = false;
        for (i = 0, j = vertices.length - 1; i < vertices.length; j = i++)
        {
            
            if (((vertices[i].y > coordenada.y) != (vertices[j].y > coordenada.y)) && (coordenada.x < (vertices[j].x - vertices[i].x) * (coordenada.y - vertices[i].y) / (vertices[j].y - vertices[i].y) + vertices[i].x))
            {
                c = !c;
            }
 
	    }
	    return c;
    }
    
    function loop(){
        ctx.clearRect(0,0,canvas.width, canvas.height);
        dibujarPoligono(poligono);
        dibujarPunto(punto);
        log((colisionPuntoPoligono(poligono,punto))?"dentro":"fuera");
        window.requestAnimationFrame(loop);
    }
    
    canvas.onclick=function(e){
        punto.x=e.clientX-this.offsetLeft;
        punto.y=e.clientY-this.offsetTop;
    }
    
    loop();
}