Как нарисовать с помощью видео с помощью html-canvas tag?

Question

Мне было интересно, как я могу «рисовать» с изображением (пример показан ниже) с использованием Javascript и холста? «Рисовать» в том смысле, что изображение будет следовать за мышью и многократно помещать себя каждый раз, когда мышь меняет положение.

EDIT: Хорошо, поэтому сузить свой вопрос. В принципе, мне интересно, как мне «рисовать» изображение с помощью тега canvas? Как бы я «рисовал» видеообъект?

Answer 1

Это довольно прямо вперед:

• Загрузить изображение
• Получить Coords вашей мыши
• Нарисуйте изображение на этих координатам
• Используйте CSS для позиционирования элементов вашего

Главное, чтобы не очистить свой холст.

canvas.onmousemove = draw; 
 
var ctx = canvas.getContext('2d'); 
 
var img = new Image; 
 
img.src = 'http://lorempixel.com/50/50?'+Math.random(); 
 
function draw(e){ 
 
    var rect = canvas.getBoundingClientRect(); 
 
    var x = e.clientX-rect.left-img.width/2; 
 
    var y = e.clientY-rect.top-img.height/2; 
 
    ctx.drawImage(img, x, y, img.width, img.height); 
 
    }

canvas{position: absolute; z-index:1;} 
 
#up{z-index:2; background-color:rgba(125,0,125,.5);} 
 
p{position: relative; background-color:rgba(0,125,125,.5); color:#ccc}

<canvas id="canvas" width=500 height=500></canvas> 
 
<p id="up">There is something behind me</p> 
 
<p id="down">There is something above me</p>