title: How to do pixel-perfect collision detection of two partially transparent images
body: <p>So basically I to make so that when the two characters on the screen touch and someone presses a button it will take away their health. The only thing I don't know how to do is how to detect when they touch. </p>
  
  <pre><code>$(document).ready(function(){
  
  
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");
  canvas.width = 1000;
  canvas.height = 600;
  document.body.appendChild(canvas);
  
  var kGroundHeight = 500;
  
  /*var upKey = 38;
  var downKey = 40;
  var leftKey = 37;
  var rightKey = 39;
  */
  
  
  var render = function() {
    gravity();
    gravity1();
  
  
  
    context.clearRect(0, 0, canvas.width, canvas.height);
  
      context.fillRect(0,kGroundHeight,canvas.width,10);
  
    context.drawImage(kirby, kirbyObject.x, kirbyObject.y);
  
      context.drawImage(link, linkObject.x, linkObject.y);
  
  };
  
  
  
  
  var main = function() {
  
    render();
    window.requestAnimationFrame(main);
  };
  
  main();
  });
  
  
  
  
  var linkReady = false;
  var link = new Image();
  link.onLoad = function() {
  
    linkReady = true;
  };
  
  
  linkObject = {};
  link.src= "https://vignette1.wikia.nocookie.net/zelda/images/1/18/Link_(Sprite)_The_Legend_of_Zelda.png/revision/latest?cb=20130117162823";
  
  linkObject.x = 200;
  linkObject.y = 200;
  
  
  
  
  
  
  var keys = {};
  
  
  
  
  $(document).keydown(function(e) {
      console.log(e);
  
     move1(e.keyCode);
  
      if (keys[87] &amp;&amp; keys[65]) {
         linkObject.y -=50;
         linkObject.x -=50;
  
  
      }else if(keys[87] &amp;&amp; keys[68]){
  
        linkObject.y -=50;
        linkObject.x +=50;
  
  
      }else if(keys[83] &amp;&amp; keys[68]){
  
        linkObject.y +=50;
        linkObject.x +=50;
  
  
      }else if(keys[83] &amp;&amp; keys[65]){
  
        linkObject.y +=50;
        linkObject.x -=50;
      }
  
      keys[e.keyCode] = true;
  }).keyup(function(e) {
  
     keys[e.keyCode] = false;
  
  
  
  });
  
  var upKey1 = 87;
  var downKey1 = 83;
  var leftKey1 = 65;
  var rightKey1 = 68;
  var attackKey1 = 75; 
  
  
  var move1 = function(key) {
  
    if (key == upKey1) {
      linkObject.y -= 50;
    }else if(key == downKey1){
  
        var kGroundHeight = 500;
  
       if(linkObject.y + link.height ==  kGroundHeight){
  
        linkObject.y +=0;
      }else{
  
        linkObject.y +=50;
  
      }
  
  
      //console.log("down");
          console.log(linkObject.y);
  
  
    }else if(key == leftKey1){
  
      linkObject.x -=50;
    }else if(key == rightKey1 ){
  
      linkObject.x +=50;
    }
    // MORE DIRECTIONS!!!
  };
  
  
  
  
  var gravity1 = function() {
      var kGravityScale = 1;
    var kGroundHeight = 500;
  
    if (linkObject.y + link.height ==  kGroundHeight) {
  
      linkObject.y += 0;
  
    }else{
          linkObject.y += kGravityScale;
  //console.log(link.width);
    }
  };
  
  
  var attack = function(a){
  
  
  
  };
  
  
  
   var kGroundHeight = 500;
  
  
  var keys = {};
  
  
  
  
  $(document).keydown(function(e) {
      console.log(e);
  
     move(e.keyCode);
  
      if (keys[38] &amp;&amp; keys[37]) {
         kirbyObject.y -=50;
         kirbyObject.x -=50;
  
  
      }else if(keys[38] &amp;&amp; keys[39]){
  
        kirbyObject.y -=50;
        kirbyObject.x +=50;
  
  
      }else if(keys[40] &amp;&amp; keys[39]){
  
        kirbyObject.y +=50;
        kirbyObject.x +=50;
  
  
      }else if(keys[40] &amp;&amp; keys[37]){
  
        kirbyObject.y +=50;
        kirbyObject.x -=50;
      }
  
      keys[e.keyCode] = true;
  }).keyup(function(e) {
  
     keys[e.keyCode] = false;
  
  
  
  });
  
  
  var kirbyReady = false;
  var kirby = new Image();
  kirby.onLoad = function() {
    kirbyReady = true;
  };
  
  kirbyObject = {};
  kirby.src = "https://vignette3.wikia.nocookie.net/spritechronicles/images/5/5c/Kirby.png/revision/latest?cb=20101010225540";
  
  
  
  
  kirbyObject.x = 300;
  kirbyObject.y = 100;
  
  
  
  var upKey = 38;
  var downKey = 40;
  var leftKey = 37;
  var rightKey = 39;
  var attackKey = 32; 
  
  
  
  var move = function(key) {
  
    if (key == upKey) {
      kirbyObject.y -= 50;
    }else if(key == downKey){
  
        var kGroundHeight = 500;
  
       if(kirbyObject.y + kirby.height ==  kGroundHeight){
  
        kirbyObject.y +=0;
      }else{
  
        kirbyObject.y +=50;
  
      }
  
  
      //console.log("down");
          console.log(kirbyObject.y);
  
  
    }else if(key == leftKey){
  
      kirbyObject.x -=50;
    }else if(key == rightKey ){
  
      kirbyObject.x +=50;
    }
    // MORE DIRECTIONS!!!
  };
  
  
  
  
  var gravity = function() {
      var kGravityScale = 1;
    var kGroundHeight = 500;
  
    if (kirbyObject.y + kirby.height ==  kGroundHeight) {
  
      kirbyObject.y += 0;
  
    }else{
          kirbyObject.y += kGravityScale;
  
    }
  };
  </code></pre>