Moving eye based on cursor inside an image
<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>