Javascript isPointInPath conditions

i have a canvas with different shapes that change color, i wanted to check if the player who clicked on of the shapes matches the color of the other shape and if true to increase score, but it wont take the && one==flr part if i remove it, it works heres the code for randomizing color and adding shapes

function interval()
{
mycanvas = document.getElementById("mycanvas");
    var clr=["red", "blue", "green", "yellow"];
    var one=[Math.floor((Math.random() * 4) + 0)];
    var two=[Math.floor((Math.random() * 4) + 0)];
    var thr=[Math.floor((Math.random() * 4) + 0)];
    var flr=[Math.floor((Math.random() * 4) + 0)];  
    var t=1000;  
    var score=0;

ctx.fillStyle=clr[one];
    ctx.fillRect(300,250,150,250);
    ctx.fillStyle=clr[two];
    ctx.fillRect(700,250,150,250);
    ctx.fillStyle=clr[thr];
    ctx.fillRect(1100,250,150,250);

    ctx.beginPath();
    ctx.moveTo(300,500);
    ctx.lineTo(1250,500);
    ctx.lineTo(1450,720);
    ctx.lineTo(100,720);
    ctx.closePath();
    ctx.fillStyle=clr[flr];
    ctx.fill();
    ctx.strokeStyle="black";
    ctx.stroke();

code for checking mouse click

mycanvas.onclick= function(e) 
    { 

        var pos=this.getBoundingClientRect(), x=e.clientX - pos.left,
        y = e.clientY - pos.top;
        getRect(300,250,150,250);
        if (ctx.isPointInPath(x,y) && one == flr) 
        {
            score+=10;
        }
        else
        delay=delay-100; 
    };

    if(delay<=0)
    {   
        clearInterval(intervalID);
    }
    function getRect(x,y,w,h)
    {
        ctx.beginPath();
        ctx.rect(x,y,w,h);
        ctx.closePath();
    }
}