title: Selecting and deselecting drawn objects on canvas and moving to mouse X and Y
body: <p>The attached code shows how to select (on click) a drawn object on canvas and then the object is moved with a double click to click position or deselected with a double click prior to/ post-movement. </p>
  
  <p>I have tried for days but could not work out how to apply this function to all objects in a class or an array via looping (via class constructor + prototyping). I would like to be able to select or deselect any object on screen.</p>
  
  <p>Help will be very much appreciated. Thank you. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
   canvas {
    display: block;
    margin: 0px;
   }
   body {
    margin: 0px;
   }     
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;input id="click1" type ="button" value="x" style="position: fixed; top: 0px; left: 650px; position: absolute;"&gt;&lt;/input&gt;
  &lt;input id="click2" type ="button" value="y" style="position: fixed; top: 0px; left: 750px; position: absolute;"&gt;&lt;/input&gt;
  &lt;script&gt;
  window.onload = function(){
   var canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
  
    let strokeColor;
    let color;
    let mouse_x;
    let mouse_y;
    let x;
    let y;
    let w;
    let h;
    let selected = false;
    x = 50;
    y = 50;
    w = 50;
    h = 50;
    color="green";
    strokeColor = "green";
      
    document.getElementById('canvas').addEventListener("mousemove",go);
    
    document.getElementById('canvas').addEventListener("mouseup",mouseUp);
    
    document.getElementById('canvas').addEventListener("dblclick",dblClick);
    
    document.getElementById('canvas').addEventListener("dblclick",move);
    
    function move(){
     
     if(selected == true){
     x = mouse_x;
     y = mouse_y;
     
     }
    }
    
    function mouseUp(){
     
     if(mouse_x &gt; x &amp;&amp; mouse_x &lt; x+w &amp;&amp; mouse_y &gt; y &amp;&amp; mouse_y &lt; y+w){
     strokeColor = "black";
     selected = true;
     console.log(selected);
     }
     
    }
     
    function dblClick(){
     
     if(mouse_x &gt; x &amp;&amp; mouse_x &lt; x+w &amp;&amp; mouse_y &gt; y &amp;&amp; mouse_y &lt; y+w){
     color = "green";
     strokeColor = color;
     selected = false;
     console.log(selected);
     }
    } 
    
    function go(e){
     
     mouse_x = e.clientX;
     mouse_y = e.clientY;
     document.getElementById('click1').value = mouse_x;
     document.getElementById('click2').value = mouse_y;
     
    }  
  
    function draw(){
     context.strokeStyle = strokeColor;;
     context.fillStyle = color;
     context.beginPath();
     context.lineWidth = 3;
     context.rect(x,y,w,h);
     context.fill();
     context.stroke();   
    }
      
    function animate(){
     
     context.clearRect(0,0,width,height);
     context.save();
     draw();
     context.restore();
     requestAnimationFrame(animate);
        
    }
     
    animate();
      
  };
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>