title: Javascript mouseup and mousedown event
body: <p>i am trying to drag and drop an image of a card on the canvas of the javascript but the mouseup event does not seem to be working even though it is inside the main(). Once the card is selected, it follows around the mouse but it does not seem to let go when i let go of the mouse. I also know that the image is repeated from not clearing the screen.</p>
  
  <pre><code>function main(){
  var ctx = cvs.getContext("2d");
  var img = new Image();
  img.src = "allcards.png";
  var imgX = 75;
  var imgY = 75;
  draw();
  
  function draw(){
      ctx.drawImage(img,0,0,97,129,imgX,imgY,100,100);    
  }
  
  cvs.addEventListener("mouseup", function(ev){
          greaterX = false;
          lessX = false;
          greaterY = false;
          lessY = false;
      }
  );
  
  cvs.addEventListener("mousedown", function(ev){
          if(ev.clientX &lt;= (imgX + 97)){
              var greaterX = true;
          }
          if(ev.clientY &lt;= (imgY + 129)){
              var greaterY = true;
          }
          if(ev.clientX &gt;= imgX){
              var lessX = true;
          }
          if(ev.clientY &gt;= imgY){
              var lessY = true;
          }
          if(greaterX == true)
              if(greaterY == true)
                  if(lessX == true)
                      if(lessY == true)
                          cvs.addEventListener("mousemove", function(ev){
                              var offsetX = (ev.clientX - imgX);
                              var offsetY = (ev.clientY - imgY);
                              imgX = imgX + offsetX;
                              imgY = imgY + offsetY;
                              draw();
                          });
      });
  };
  </code></pre>