title: Use Canvas as pad for multiple range inputs
body: <p>I'm trying to build an html canvas pad that will allow a user to drag and drop a dot on the pad, which will then return two values (one for Y axis, and one for Y axis), which I can use to trigger effects using the web audio API.</p>
  
  <p>I've already sorted out the web Audio API portion of the problem.</p>
  
  <p>The User:</p>
  
  <ul>
  <li>Clicks and drags the dot to anywhere on the X/Y grid</li>
  <li>On Drop we will have an X &amp; Y value (perhaps in hidden range inputs), that trigger eventListeners.</li>
  <li>The X value eventListener affects the <code>wet/dry</code> of the delay effect</li>
  <li>The Y value eventListener affects the <code>delay_time</code> of the delay effect</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/7mu1l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7mu1l.png" alt="enter image description here"></a></p>
  
  <p>so far I've been able to create and render the canvas and circle, and add event listeners on the svg element and the window. With the idea being that I can detect when an event occurs inside the canvas and when that click event leaves the canvas.</p>
  
  <pre><code>// Draw SVG pad
  function drawDelayPad() {
  var canvas = document.getElementById('delayPad');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var rectangle = new Path2D();
    rectangle.rect(1, 1, 200, 200);
  
    var circle = new Path2D();
    circle.moveTo(150, 150);
    circle.arc(100, 35, 10, 0 , 2 * Math.PI);
    ctx.stroke(rectangle);
    ctx.fill(circle);
    }
  }
  
  // Listener on canvas
  var canvas = document.getElementById('delayPad');
  
  canvas.addEventListener("mousedown", function(){
    console.log("click inside our canvas")
  })
  
  // Listener on document to check if we're outside the canvas
  window.addEventListener("mouseup", function(){
    console.log("outside our canvas")
  });
  </code></pre>
  
  <p>So I think what I need to determine now is that when a click event does occur inside of the canvas, how far it is from the cirle, and if it does fall within the bounds of the circle, I should redraw it as long as the mousedown event is active.</p>
  
  <p>Any help would be greatly appreciated.</p>