title: How to check if two drawings (lines) are colliding in Canvas?
body: <p>So I've been working on a running stick man game. Unfortunately I've come across this one problem I just can't seem to figure out. I want an alert to appear and say "Game Over" if a drawing named obstacle passes through my stick man. However if my stickman kicks (which he turns red) and the obstacle touches the drawings right foot then it will say "You win". Any help would be well appreciated! </p>
  
  <p>The following is what I have so far: Btw I considered checking if a given pixel that the obstacle passes is red, then say "You win", but that seems not to work. </p>
  
  <pre><code>$(document).ready(function(e){
  
  //get canvas from drawcanvas div
  var canvas = document.getElementById("drawCanvas"),
  
  //utilize 2D canvas
  context = canvas.getContext('2d'),
  
  //get width of canvas
  width = canvas.width,
  
  //get height of canvas
  height = canvas.height,
  
  //create stickman to keep track of body parts
  stickman = {head: [200, 200, 10,0,  2*Math.PI ],
  body: [195, 210, 178, 250],
  rightArm: [192,215,200,230,210,230],
  leftArm: [192,215,178 ,222,178,230],
  rightLeg: [178, 250,190,260,185,275,192, 275],
  leftLeg: [178, 250, 168, 260, 155, 262,153, 268]
  } ;
  
  //create obstacle 1
  obstacle1  = { circle: [450,200, 8, 0, 2* Math.PI],
  ob1_mv1:  [455, 200],
  ob1_l1: [470, 200],
  ob1_mv2:  [445, 200],
  ob1_l2: [430, 200] };
  var ob1Distance = 0;
  
  
  var id = context.createImageData(1,1);
  var d = id.data;
  d[0] = 0;
  d[1] = 0;
  d[2] = 0;
  d[3] = 0;
  
  /function to render normal obstacle
  function obstacle1_norm(ob1Distance) {
  context.strokeStyle =  "rgb(0,0,0)";
  
  context.beginPath();
  //obstacle core
  context.arc(obstacle1.circle[0] +ob1Distance,
  obstacle1.circle[1],
  obstacle1.circle[2],
  obstacle1.circle[3],
  obstacle1.circle[4],
  obstacle1.circle[5]) ;
  context.moveTo(obstacle1.ob1_mv1[0] + ob1Distance,obstacle1.ob1_mv1[1]);
  context.lineTo(obstacle1.ob1_l1[0] + ob1Distance,obstacle1.ob1_l1[1]);
  context.moveTo(obstacle1.ob1_mv2[0] +ob1Distance, obstacle1.ob1_mv2[1]);
  context.lineTo(obstacle1.ob1_l2[0] +ob1Distance, obstacle1.ob1_l2[1]);
  context.stroke();
  }
  
  //function render normal obstacle spin
  function obstacle1_spin(ob1Distance){
  context.strokeStyle =  "rgb(0,0,0)";
  
  context.beginPath();
  context.arc(obstacle1.circle[0] +ob1Distance,
  obstacle1.circle[1],
  obstacle1.circle[2],
  obstacle1.circle[3],
  obstacle1.circle[4],
  obstacle1.circle[5]) ;
  context.moveTo(obstacle1.ob1_mv1[0] - 5  + ob1Distance ,obstacle1.ob1_mv1[1]);
  context.lineTo(obstacle1.ob1_l1[0] - 18 + ob1Distance ,obstacle1.ob1_l1[1]);
  context.moveTo(obstacle1.ob1_mv2[0] - 5 + ob1Distance  ,obstacle1.ob1_mv2[1]);
  context.lineTo(obstacle1.ob1_l2[0] - 20 + ob1Distance,obstacle1.ob1_l2[1]);
  context.stroke();
  }
  
  function costume1(){
  context.strokeStyle =  "rgb(0,0,0)";
  context.beginPath();
  //head
  context.arc(stickman.head[0], stickman.head[1], stickman.head[2], stickman.head[3], stickman.head[4]);
  //body
  context.moveTo(stickman.body[0],stickman.body[1]);
  context.lineTo(stickman.body[2],stickman.body[3]);
  
  //right arm
  context.moveTo(stickman.leftArm[0],stickman.leftArm[1]);
  context.lineTo(stickman.leftArm[2] ,stickman.leftArm[3]);
  context.lineTo(stickman.leftArm[4], stickman.leftArm[5]);
  
  //left arm
  context.moveTo(stickman.rightArm[0], stickman.rightArm[1]);
  context.lineTo(stickman.rightArm[2], stickman.rightArm[3]);
  context.lineTo(stickman.rightArm[4] , stickman.rightArm[5]);
  
  //left leg
  context.moveTo(stickman.rightLeg[0], stickman.rightLeg[1]);
  context.lineTo(stickman.rightLeg[2],stickman.rightLeg[3]);
  context.lineTo(stickman.rightLeg[4] , stickman.rightLeg[5]);
  context.lineTo(stickman.rightLeg[6], stickman.rightLeg[7]);
  
  
  //right leg
  context.moveTo(stickman.leftLeg[0], stickman.leftLeg[1]);
  context.lineTo(stickman.leftLeg[2], stickman.leftLeg[3]);
  context.lineTo(stickman.leftLeg[4], stickman.leftLeg[5]);
  context.lineTo(stickman.leftLeg[6] , stickman.leftLeg[7]);
  context.stroke();
  }
  
  //stick figure costume 2
  function costume2(){
  context.strokeStyle =  "rgb(0,0,0)";
  
  context.beginPath();
  //head
  context.arc(stickman.head[0], stickman.head[1], stickman.head[2], stickman.head[3], stickman.head[4]);
  //body
  context.moveTo(stickman.body[0],stickman.body[1]);
  context.lineTo(stickman.body[2],stickman.body[3]);
  //left arm
  context.moveTo(stickman.leftArm[0],stickman.leftArm[1]);
  context.lineTo(stickman.leftArm[2] +10 ,stickman.leftArm[3]+5);
  context.lineTo(stickman.leftArm[4] +20, stickman.leftArm[5]-8);
  //right arm
  context.moveTo(stickman.rightArm[0]    ,  stickman.rightArm[1]);
  context.lineTo(stickman.rightArm[2] -20 , stickman.rightArm[3] -5);
  context.lineTo(stickman.rightArm[4] -20, stickman.rightArm[5]-5);
  //right leg
  context.moveTo(stickman.rightLeg[0], stickman.rightLeg[1]);
  context.lineTo(stickman.rightLeg[2] - 8 ,stickman.rightLeg[3]);
  context.lineTo(stickman.rightLeg[4] -20, stickman.rightLeg[5]);
  context.lineTo(stickman.rightLeg[6] -20, stickman.rightLeg[7]);
  //left leg
  context.moveTo(stickman.leftLeg[0], stickman.leftLeg[1]);
  context.lineTo(stickman.leftLeg[2] + 20 , stickman.leftLeg[3]);
  context.lineTo(stickman.leftLeg[4] +8, stickman.leftLeg[5] + 8 );
  context.lineTo(stickman.leftLeg[6] +15 , stickman.leftLeg[7] + 4);
  context.stroke();
  }
  
  function fight_kick(){
  context.strokeStyle =  "rgba(255,0,0,255)";
  
  context.beginPath();
  //head
  context.arc(stickman.head[0] - 20, stickman.head[1], stickman.head[2], stickman.head[3], stickman.head[4]);
  //body
  context.moveTo(stickman.body[0] - 15,stickman.body[1]);
  context.lineTo(stickman.body[2],stickman.body[3]);
  //left arm
  context.moveTo(stickman.leftArm[0] - 13,stickman.leftArm[1]);
  context.lineTo(stickman.leftArm[2] - 15 ,stickman.leftArm[3]+5);
  context.lineTo(stickman.leftArm[4] - 20, stickman.leftArm[5]-15);
  //right arm
  context.moveTo(stickman.rightArm[0] - 13    ,  stickman.rightArm[1]+1);
  context.lineTo(stickman.rightArm[2]  , stickman.rightArm[3] - 22);
  context.lineTo(stickman.rightArm[4] , stickman.rightArm[5] - 35);
  //right leg
  context.moveTo(stickman.rightLeg[0], stickman.rightLeg[1]);
  context.lineTo(stickman.rightLeg[2] - 20 ,stickman.rightLeg[3]);
  context.lineTo(stickman.rightLeg[4] -20, stickman.rightLeg[5]);
  context.lineTo(stickman.rightLeg[6] -30, stickman.rightLeg[7]);
  //left leg
  context.moveTo(stickman.leftLeg[0], stickman.leftLeg[1]);
  context.lineTo(stickman.leftLeg[2] + 25 , stickman.leftLeg[3]-18);
  context.lineTo(stickman.leftLeg[4] + 55, stickman.leftLeg[5] -30 );
  context.lineTo(stickman.leftLeg[6] +60, stickman.leftLeg[7] - 40);
  
  context.stroke();
  }
  
  var ob1_flag = true ;
  function ob1_spinning(){
   if (ob1_flag == true  ) {
  
     obstacle1_spin(ob1Distance);
     ob1_flag = false;
    }else  if (ob1_flag == false ) {
  
     obstacle1_norm(ob1Distance) ;
     ob1_flag = true;
    }
   ob1Distance -= 20;
  
  }
  
  
  //create board
  function board(){
  context.fillStyle="#FFF";
  context.fill();
  context.beginPath();
  context.moveTo(0,276);
  context.lineTo(width,276);
  context.stroke();
  context.strokeStyle="#000";
  context.strokeRect(0,0,width,height);
  //setInterval(function(){ob1_spinning();}, 100);
  
  }
  
  
  function collision() {
  
  var dataPixel = context.getImageData(stickman.rightLeg[4] -20, stickman.rightLeg[5],
  canvas.width, canvas.height).data;
  if ( obstacle1.circle[0] + ob1Distance - 30  &lt; stickman.head[0] + 10      )  {
  }
   if (dataPixel[0] + dataPixel[1]  + dataPixel[2]  &lt;  255 &amp;&amp; dataPixel[0] + dataPixel[1]  + dataPixel[2] &gt;= 241 ){
   alert("red") 
  }
  // context.putImageData(id,stickman.rightLeg[4] -20, stickman.rightLeg[5]);
  
   }
  
  
  
  
  timer =  setInterval(function(){running();} , 200);
  //function check  space key press if so kick
  function check(e) {
      var code = e.keyCode;
      //Up arrow pressed
       if (code == 32 ) {
         context.clearRect(150,125.25, 70, 150);
         board();
         clearInterval(timer);
         setTimeout(fight_kick(), 250);
   }
   timer = setInterval(function() { running();}, 250);
  }
  
  //check for event keydown
  window.addEventListener('keydown',check,false);
  
  //flag for switching costumes
  flag = true;
  
  //running function to switch between all costumes
  function running(){
  if (flag == true) {
   context.clearRect(150,125.25, 70, 150);
   board();
   costume2();
   flag = false;
  }else if(flag == false) {
   context.clearRect(150,125.25, 70, 150);
   board();
   costume1();
   flag = true;
  }
   }
  setInterval(function(){collision();}, 5);
  setInterval(function(){
  context.clearRect(400+ob1Distance,162, 90 , 50 );
  ob1_spinning()
  ;} , 300);
  
  });
  </code></pre>