How to get hover effect to reset when cursor is outside canvas area?

I'm trying to set up a hover effect where the image will follow the cursor inside the canvas, but when the mouse goes outside of the canvas area I would like the image to move back to its center position.

My canvas and image are fine:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

 <canvas id="canvas" width="550px" height="550px" style="border: 2px solid red" class="paddingleft">

But I need to fix something in with the javascript/jquery so that it will do what I like:

var AN = AN || {};

var pic = new Image();
var canvas;
var context;

var x = 0;
var y = 0;

AN.initialize = function() {
  //load canvas
  canvas = $('#canvas');
  canvas.mousemove(AN.moveMouse);
  context = canvas[0].getContext('2d');
  //load image
  pic.src = "https://cdn.shopify.com/s/files/1/0539/9904/2739/files/smiley.png?v=1614313440";
};
pic.height = 400;
pic.width = 400;

AN.moveMouse = function (e) {
  var element = $(pic);
  var t = 0; //0-1, this is what you change in animation loop
  var position = getMousePosition(e);
  function myLoop() {  
    context.clearRect(0, 0, canvas.width(), canvas.height());

    x += EasingFunctions.easeInOutQuad(t) * (position.x - x);
    y += EasingFunctions.easeInOutQuad(t) * (position.y - y);

    // set element by tx
    context.drawImage(pic, x, y, pic.width, pic.height);

    if (t < 1) {
      t += 0.01; //determines speed
      requestAnimationFrame(myLoop);
      //setTimeout(myLoop, 16); //option to above
    }
  }
  myLoop();
};

EasingFunctions = {
  linear: function(t) {
    return t;
  },
  easeInQuad: function(t) {
    return t * t;
  },
  easeOutQuad: function(t) {
    return t * (2 - t);
  },
  easeInOutQuad: function(t) {
    return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
  },
  easeInCubic: function(t) {
    return t * t * t;
  },
  easeOutCubic: function(t) {
    return (--t) * t * t + 1;
  },
  easeInOutCubic: function(t) {
    return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
  },
  easeInQuart: function(t) {
    return t * t * t * t;
  },
  easeOutQuart: function(t) {
    return 1 - (--t) * t * t * t;
  },
  easeInOutQuart: function(t) {
    return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
  },
  easeInQuint: function(t) {
    return t * t * t * t * t;
  },
  easeOutQuint: function(t) {
    return 1 + (--t) * t * t * t * t;
  },
  easeInOutQuint: function(t) {
    return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
  }
}

function getMousePosition(e) {
    return {
        x: e.clientX - pic.width * 0.5,
        y: e.clientY - pic.height * 0.5
    }
}

$(document).ready(function() {
  //initialize funtion
  AN.initialize();
});

</canvas>

I'm not sure if anyone will be able to help me but if someone can I would appreciate it.

Here is my code pen for convience:

https://codepen.io/kyannashanice/pen/gOLymYe