要将Blob视频播放到画布上，可以使用HTML5的

HTML:

JavaScript:

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

video.addEventListener('play', function() {
  drawVideo();
});

function drawVideo() {
  if (video.paused || video.ended) return;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawVideo);
}

在上面的代码中，

然后，我们添加一个事件监听器来监听视频的播放事件。当视频开始播放时，调用drawVideo函数。

drawVideo函数检查视频是否已暂停或已结束，如果是，则退出函数。否则，使用drawImage方法将视频的当前帧绘制到画布上，并使用requestAnimationFrame方法递归调用drawVideo函数，以便在每一帧中更新画布。

需要注意的是，上面的示例假设视频源是video.mp4，并且视频的宽度和高度与画布相同。如果视频源和尺寸与示例不同，需要相应地进行修改。