Javascript 在HTML画布上的可拖动矩形中输入文本

对于我正在做的一个项目，我有一个画布，在上面我画了几个矩形。这些矩形可以通过鼠标和一些鼠标事件移动或调整大小。但我现在陷入困境。我想在绘制的每个矩形上都有一个文本输入，并且该文本输入必须与它所在的矩形一起移动

我的矩形是使用此构造函数绘制的：

// Constructor for Shape objects to hold data for all drawn objects.
// For now they will just be defined as rectangles.
function Shape(id, questionId, label, isCorrect, weight, x, y, w, h, fill) {
  // This is a very simple and unsafe constructor. All we're doing is checking if the values exist.
  // "x || 0" just means "if there is a value for x, use that. Otherwise use 0."
  // But we aren't checking anything else! We could put "Lalala" for the value of x 
  this.x = x || 0;
  this.y = y || 0;
  this.w = w || 1;
  this.h = h || 1;
  this.fill = fill || '#AAAAAA';

  this.id = id;
  this.questionId = questionId;
  this.weight = weight || 0;
  this.text = label || "zspot";
  this.hasChanged = false;
  this.checked = isCorrect || false;
  this.isNew = false;
}

// Draws this shape to a given context
Shape.prototype.draw = function (ctx) {
  ctx.fillStyle = this.fill;
  ctx.fillRect(this.x, this.y, this.w, this.h);
}

下面是一个JSFIDLE，其中包含我的代码：。（可能有点长，有点乱，对不起）