Separating axis theorem difficulties

Question

I'm having huge problems with this collision detection algorithm. I understand how it works, but I don't know how to implement it in my code, even though I've seen a lot of tutorials on it. There's currently no collision detection code in this snippet. Here's the demo:

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

          var square = {
               x:150,
               y:100,
               width:100,
               height:100
          };
          var triangle = {
               x:300,
               y:100,
               width:100,
               height:100
          };

          function draw() {
               	ctx.clearRect(0,0,canvas.width,canvas.height);
              	ctx.lineWidth = 1;
              	ctx.strokeStyle = "black";
              	
              	//Draw the square
              	ctx.strokeRect(square.x,square.y,square.width, square.height);

              	//Draw the triangle
                ctx.beginPath();
                ctx.moveTo(triangle.x+triangle.width/2,triangle.y);
                ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height);
                ctx.lineTo(triangle.x, triangle.y + triangle.height);
                ctx.closePath();
                ctx.stroke();       

               requestAnimationFrame(draw);
          }
          draw();

          document.body.addEventListener("mousemove", function(e) {
               square.x = e.clientX;
               square.y = e.clientY;
          });

 canvas {
                    border:1px solid black;
             }

<canvas id="canvas" width="600" height="600"></canvas>
 

Answer 1

Added a collision function, checks if the squares boundaries intersects with the ones of the triangle or if one another contains.

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

var square = {
  x:150,
  y:100,
  width:100,
  height:100
};
var triangle = {
  x:300,
  y:100,
  width:100,
  height:100
};

function draw() {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.lineWidth = 1;
  ctx.strokeStyle = "black";

  //Draw the square
  ctx.strokeRect(square.x,square.y,square.width, square.height);

  //Draw the triangle
  ctx.beginPath();
  ctx.moveTo(triangle.x+triangle.width/2,triangle.y);
  ctx.lineTo(triangle.x + triangle.width, triangle.y + triangle.height);
  ctx.lineTo(triangle.x, triangle.y + triangle.height);
  ctx.closePath();
  ctx.stroke();       

  requestAnimationFrame(draw);
}
draw();

document.body.addEventListener("mousemove", function(e) {
  square.x = e.clientX;
  square.y = e.clientY;
  collision();
});

function collision(){
  if(triangle.x + triangle.width - square.x >= 0 && triangle.y + triangle.height - square.y >= 0 && square.y - (triangle.y - square.height) >= 0 && square.x - (triangle.x - square.width) >= 0 && square.x - x1(square.y) >= 0 && x2(square.y) - square.x >= 0){
    console.log("collision");
  }
}

function x1(y){
  return triangle.x - square.width + ((triangle.width/2) / triangle.height) * ((triangle.y + triangle.height - square.height) - y);
}

function x2(y){
 return triangle.x + triangle.width/2 + ((triangle.width - triangle.width/2)/triangle.height) * (y - (triangle.y - square.height)); 
}

canvas {
                    border:1px solid black;
             }

<canvas id="canvas" width="600" height="600"></canvas>