在HTML 5标签视频上绘制矩形

<canvas id="myCanvas" width="640" height="360"></canvas>

var canvas = document.getElementById("myCanvas");
var video = document.getElementById("myVideo");

var ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

ctx.fillRect(50, 50, 100, 100);

video.addEventListener("timeupdate", function() {
  // 清除Canvas内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制视频
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  // 绘制矩形
  ctx.fillRect(50, 50, 100, 100);
});