如何使用鼠标将此绘图拖动？

Question

好的，所以我有三个功能，不同的心情笑脸。我希望能够用鼠标拖动它们。我知道实际上没有办法让它可以拖动，但应该有办法让它看起来好像被拖了？你们有什么想法吗？以下是我正在使用的内容：

var document;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var centerX;
var centerY;
var size;
var color;
var i;

function pintaSmiley(cX, cY, s, col) {
  "use strict";
  context.beginPath();
  context.fillStyle = col;
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 16 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 32 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 38 * s, cY - 43 * s, 9 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX, cY + 10 * s, 60 * s, 0, Math.PI, false);
  context.closePath();
  context.fill();
}

function angrySmiley(cX, cY, s, col) {
  "use strict";
  context.beginPath();
  context.fillStyle = col;
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 35 * s, cY - 38 * s, 32 * s, 0.32, Math.PI / 0.9, false);
  context.closePath();
  context.fill();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 30 * s, 5 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 35 * s, cY - 38 * s, 32 * s, -0.5, Math.PI / -0.9, false);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 30 * s, 5 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(0, 0, 0, 1)';
  context.arc(cX - 10 * s, cY + 74 * s, 60 * s, -0.2, Math.PI * 1.2, true);
  context.closePath();
  context.fill();
}

function hurtSmiley(cX, cY, s, col) {
  "use strict";
  context.beginPath();
  context.fillStyle = col;
  context.arc(cX, cY, 100 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.fillStyle = "black";
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX - 35 * s, cY - 38 * s, 32 * s, 0, Math.PI / 1.2, false);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(55, 50);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX - 35 * s, cY - 24 * s, 5 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "white";
  context.arc(cX + 35 * s, cY - 38 * s, 32 * s, 0.4, Math.PI, false);
  context.closePath();
  context.fill();
  context.lineWidth = 2;
  context.stroke();
  context.moveTo(103, 49);
  context.beginPath();
  context.fillStyle = "black";
  context.arc(cX + 35 * s, cY - 26 * s, 5 * s, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  context.moveTo(105, 75);
  context.beginPath();
  context.fillStyle = 'rgba(50, 50, 50, 1)';
  context.arc(cX, cY + 45 * s, 40 * s, 0, Math.PI, true);
  context.closePath();
  context.fill();
  context.lineWidth = 3;
  context.stroke();
}

for (i = 0; i < 344; i += 1) {
  centerX = Math.floor((Math.random() * width) + 1);
  centerY = Math.floor((Math.random() * height) + 1);
  size = 15;
  size = size / 100;
  if (i % 7 === 1) {
    color = "crimson";
  } else if (i % 7 === 2) {
    color = "goldenrod";
  } else if (i % 7 === 3) {
    color = "lemonchiffon";
  } else if (i % 7 === 4) {
    color = "chartreuse";
  } else if (i % 7 === 5) {
    color = "aqua";
  } else if (i % 7 === 6) {
    color = "rebeccapurple";
  } else {
    color = "plum";
  }
  if (i % 3 === 1) {
    angrySmiley(centerX, centerY, size, color);
  } else if (i % 3 === 2) {
    pintaSmiley(centerX, centerY, size, color);
  } else {
    hurtSmiley(centerX, centerY, size, color);
  }
}

color = '#' + Math.floor(Math.random() * 16777215).toString(16);
pintaSmiley(centerX, centerY, size * 14, color);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
color = '#' + Math.floor(Math.random() * 16777215).toString(16);
pintaSmiley(centerX, centerY, size + 0.1, color);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
color = '#' + Math.floor(Math.random() * 16777215).toString(16);
pintaSmiley(centerX, centerY, size + 0.2, color);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
color = '#' + Math.floor(Math.random() * 16777215).toString(16);
pintaSmiley(centerX, centerY, size + 0.3, color);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
color = '#' + Math.floor(Math.random() * 16777215).toString(16);
pintaSmiley(centerX, centerY, size + 0.4, color);
centerX = Math.floor((Math.random() * width) + 1);
centerY = Math.floor((Math.random() * height) + 1);
color = '#' + Math.floor(Math.random() * 16777215).toString(16);
pintaSmiley(centerX, centerY, size + 0.5, color);

context.font = '20pt Arial';
context.fillStyle = '#008888';
context.fillText('Refresh for new locations and colors!', 10, 30);

<canvas id='canvas' width=500 height=500></canvas>