title: How to print out a mouse drag distance in pixels using JavaScript/JQuery
body: <p>I'm new to JS and JQuery, and I'm implementing a simple web app: I used 16 pictures to make a map (4x4 grid). When the user clicks or releases the mouse, the console prints out the mouse's X and Y position - I was able to do this.</p>
  
  <p>If the user clicks and drags the mouse, I need to print out a drag distance in pixels. I did some research but wasn't able to find a satisfying answer. Most solutions involve lengthy manipulation of "canvas" and "context", which I'm not familiar with at all; is there a simple function in JQuery that allows you to change a pixel's color once you know its coordinates? Otherwise, how should I go about this problem?</p>
  
  <p>Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict';
  
  function printMousePos(e){
      var cursorX = e.clientX;
      var cursorY = e.clientY;
      console.log("X: " + cursorX + " Y: " + cursorY);
  }
  document.addEventListener("mouseup",printMousePos);
  document.addEventListener("mousedown",printMousePos);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
       margin:0;
   }
  .map img{
      float:left;
      width:25%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;link rel="stylesheet" type="text/css" href="map.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="map.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="map" &gt;
          &lt;img src="map_images/1.png"&gt;
          &lt;img src="map_images/2.png"&gt;
          &lt;img src="map_images/3.png"&gt;
          &lt;img src="map_images/4.png"&gt;
      &lt;/div&gt;
      &lt;div class="map"&gt;
          &lt;img src="map_images/5.png"&gt;
          &lt;img src="map_images/6.png"&gt;
          &lt;img src="map_images/7.png"&gt;
          &lt;img src="map_images/8.png"&gt;
      &lt;/div&gt;
      &lt;div class="map"&gt;
          &lt;img src="map_images/9.png"&gt;
          &lt;img src="map_images/10.png"&gt;
          &lt;img src="map_images/11.png"&gt;
          &lt;img src="map_images/12.png"&gt;
      &lt;/div&gt;
      &lt;div class="map"&gt;
          &lt;img src="map_images/13.png"&gt;
          &lt;img src="map_images/14.png"&gt;
          &lt;img src="map_images/15.png"&gt;
          &lt;img src="map_images/16.png"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>