title: Moving eye based on cursor inside an image
body: <p>I'm fairly new to javascript/html5. I have a question which I couldn't find in the database of Stack Overflow. I was hoping you guys could help me out! </p>
  
  <p>I have an image<br>
  <img src="https://i.stack.imgur.com/X29I2.png" alt="image_noeye"> <img src="https://i.stack.imgur.com/l5Cwn.png" alt="eye"></p>
  
  <p>I would like the eye to move inside the white circle based on cursor position. The cursor position i already have figured out. The only thing I can't figure out is how to implement the images instead of the fillings.</p>
  
  <p><strong>This is what I got so far:</strong></p>
  
  <pre><code>  function drawEye(eye) {
    bepaalCoordinaten(eye);
  
    // eye
    context.beginPath();
    context.arc(eye.centerX, eye.centerY, eye.radius, 0, Math.PI * 2);
    context.fillStyle = "#fff";
    context.fill();
    context.closePath();
  
    // iris
    context.beginPath();
    context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 2, 0, Math.PI * 2);
    context.fillStyle = "#007";
    context.fill();
    context.closePath();
  
    // pupil
    context.beginPath();
    context.arc(eye.centerX + eye.pupilX, eye.centerY + eye.pupilY, eye.radius / 5, 0, Math.PI * 2);
    context.fillStyle = "#000";
    context.fill();
    context.closePath();
  
    context.restore();
  }
  </code></pre>
  
  <p>Is there a way replace the iris and eye with the images listed above?</p>
  
  <p>Thank you guys in advance!</p>