Javascript 画布问题中的三角形绘制

我在这里画了一张三角形/矩形的可移动照片：现在我想用视频替换照片，但用可移动的形状看这里：但不知怎么的，它不起作用。我尝试了很多，甚至可以画形状，但不能使其移动。请帮助。代码（来自某处）我过去画形状，但不能使其在视频上移动：

function draw() {
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage(v, 5, 5, 260, 125);
ctx.clearRect(135, 92, 126, 34);
ctx.beginPath();
ctx.rect(135, 92, 126, 34);
ctx.fillStyle = 'pink';
ctx.fill();
setTimeout(function(){ draw(v,5, 5, 260, 125); }, 20);
}
draw();

---

对于视频上的可移动矩形，可以使用以下代码（改编自第二个JSFIDLE链接）：

---

代码将在视频顶部的鼠标位置绘制一个矩形。它的工作原理是从

onmousemove

函数中保存鼠标位置，然后在调用draw函数时，它在该位置绘制矩形。

Oh my@gravityScore实际上我在视频上绘制了矩形，看到这里，我希望那个矩形是可移动的，而不是视频本身。请建议我应该做什么编辑来做到这一点。我明白了，我误解了你的意思。我已经更新了答案。

var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var mouseX = 135;
var mouseY = 92;

function draw() {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.drawImage(v, 5, 5, 260, 125);
  ctx.beginPath();
  ctx.rect(mouseX, mouseY, 126, 34);
  ctx.fillStyle = 'pink';
  ctx.fill();
  setTimeout(function(){ draw(v,5, 5, 260, 125); }, 20);
}


function findOffset(obj) {
  var curX = 0,
  curY = 0;
  if (obj.offsetParent) {
    do {
      curX += obj.offsetLeft;
      curY += obj.offsetTop;
    } while (obj = obj.offsetParent);

    return {
      x: curX,
      y: curY
    };
  }
}

window.addEventListener('mousemove', function(event) {
  var offset = findOffset(c);
  mouseX = event.pageX - offset.x;
  mouseY = event.pageY - offset.y;
}

draw();