Как свободно рисовать на холсте в HTML 5, который накладывается на видео?

Question

У меня есть элемент video и canvas.Стили выполняются следующим образом:

canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height:100%;
  width:100%;
  background-color: rgba(0,0,255,0.5);
  z-index:10;
}
video {
  position: absolute;
  top: 0;
  left: 0;
}

HTML-код выглядит следующим образом

<video id="local-video" class="ui large image hidden" autoplay></video>
      <canvas id="c1" class="ui large"></canvas>

Я пытаюсь нарисовать на холсте поверх элемента видео.Когда я устанавливаю фиксированное положение холста, я могу рисовать на холсте с кодом ниже, но холст не накладывается на видео.Но когда я устанавливаю абсолютное положение, холст накладывается на видео, но я не могу рисовать в видео.Я проверил в своей консоли точки context.moveTo () и context.lineTo (), и они отлично отображаются, но не отображаются на холсте.Пожалуйста помоги.// canvas var canvas = document.getElementById ('c1');var context = canvas.getContext ('2d');var localVideo = document.getElementById ('local-video') localVideo.addEventListener ("loadedmetadata ", function (e) {var width = this.videoWidth, height = this.videoHeight; canvas.height = высота; canvas.width = ширина;}, false);

  $('#c1').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,false);
  redraw();
  });

  $('#c1').mousemove(function(e){
    if(paint){
      addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
      redraw();
    }
  });

  $('#c1').mouseup(function(e){
    paint = false;
  });

  $('#c1').mouseleave(function(e){
    paint = false;
  });

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

  context.strokeStyle = "rgba(0,0,255,0)";
  context.lineJoin = "round";
  context.lineWidth = 5;

  for(var i=0; i < clickX.length; i++) {
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);

     context.stroke();
     context.closePath();
  }
}

Answer 1

Я переписал скрипт на обычном js, оставив HTML и CSS похожими на ваш, и теперь он работает

var oldX, oldY;
var draw=false;
canvas.onmousedown=function(e) {
  oldX = (e.pageX - this.offsetLeft)/4;
  oldY = (e.pageY - this.offsetTop)/4;
  draw=true;
}
canvas.onmousemove=function(e) {
  var mouseX = (e.pageX - this.offsetLeft)/4; //was out of scale, this gets it almost 
  var mouseY = (e.pageY - this.offsetTop)/4; // where I want it to be, to fix
  if(draw) {
  context.beginPath();
  context.moveTo(oldX, oldY);
  context.lineTo(mouseX, mouseY);
//   console.log(mouseX, mouseY);
  context.stroke();
  context.closePath();
  oldX=mouseX;
  oldY=mouseY;
  }

}
canvas.onmouseup=function(e) {
  draw=false;
}

Answer 2

Я не знаю, ищите ли вы эту шляпу: я использую видео и холст.Я могу нажать, чтобы начать и остановить видео, и я могу свободно рисовать на холсте.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400,
  cx = cw / 2;
let ch = canvas.height = 200,
  cy = ch / 2;
ctx.strokeStyle = "#fff";

let drawing = false;

// a function to detect the mouse position
function oMousePos(element, evt) {
      var ClientRect = element.getBoundingClientRect();
           return { //objeto
           x: Math.round(evt.clientX - ClientRect.left),
           y: Math.round(evt.clientY - ClientRect.top)
}
}  
parentDiv.addEventListener('mousedown', function(evt) {
      drawing = true; // you can draw now
       let m = oMousePos(parentDiv, evt);
       ctx.beginPath();
       ctx.moveTo(m.x,m.y);
}, false);
  
  parentDiv.addEventListener('mouseup', function(evt) {
      drawing = false; // you can't draw anymore

}, false);
  parentDiv.addEventListener('mouseleave', function(evt) {
      drawing = false; // you can't draw anymore

}, false);
  
  parentDiv.addEventListener("mousemove", function(evt) {
      if (drawing) {
        let m = oMousePos(parentDiv, evt);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
      }
}, false);

body {
  background-color: #222;
  overflow: hidden;
}
video,canvas {
width:400px;
height:200px;
display: block;
position:absolute;
}

canvas {pointer-events:none;}

<div id="parentDiv">
<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
  
<canvas id="canvas"></canvas>
</div>
<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

Я не использую jQuery, но надеюсь, вы поймете идею.