Html5 Canvas - динамическая таблица сдвинула холст, и теперь ничья / изображение не отображаются

Question

Я использую HTML5 Canvas с JavaScript. В макете HTML холст имеет динамическую таблицу над ним. Размер таблицы не является статическим и изменяется во время выполнения в зависимости от заданного параметра. У меня проблема в том, что когда таблица становится длинной, она отталкивает холст, и нарисованное изображение больше не отображается. Я знаю, что нарисованное изображение присутствует, потому что когда я применяю следующий код стиля:

canvas {
  position: absolute;
  top: 0px;
  left: 0px
}

холст перемещается наверх и появляется нарисованное изображение. Кроме того, когда стол короткий, полотно работает нормально.

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

//declare variables
var canvas, context, flag = false;
var offsetX, offsetY;
var prevX; //initial position of mouse along x-axis
var currX; //new position of mouse along x-axis, initially set to 0
var prevY; //initial position of mouse along y axis
var currY; //new position of mouse along y axis, initially set to 0
var dot_draw = false;
var font_color = "black";


function startSignaturePad() {
  canvas = document.getElementById('signaturepad'); //get the canvas element
  if (canvas) {
    context = canvas.getContext("2d"); //get the 2d drawing context
    canvas.width = 400;
    canvas.height = 150;
    width = canvas.width;
    height = canvas.height;
  }


  function reOffset() {
    var BB = canvas.getBoundingClientRect();
    offsetX = BB.left;
    offsetY = BB.top;
  }


  reOffset();
  window.onscroll = function(e) {
    reOffset();
  }
  window.onresize = function(e) {
    reOffset();
  }


  //bind the event listeners to the canvas
  canvas.addEventListener("mousemove", function onMouseMove(e) {
    getPositionXY('move', e)
  }, false);
  canvas.addEventListener("mousedown", function onMouseDown(e) {
    getPositionXY('down', e)
  }, false);
  canvas.addEventListener("mouseup", function onMouseUp(e) {
    getPositionXY('up', e)
  }, false);
  canvas.addEventListener("mouseout", function onMouseOut(e) {
    getPositionXY('out', e)
  }, false);

}


function draw() { //function to draw a dot at a specific position - grabs and then draws the position of x and y
  context.beginPath();
  context.moveTo(prevX, prevY);
  context.lineTo(currX, currY);
  context.strokeStyle = font_color;
  context.lineWidth = font_size;
  context.stroke();
  context.closePath();
}


function erase() { //erase what is on the canvas
  var erase = confirm("Are you sure you want to erase?");
  if (erase) {
    context.clearRect(0, 0, width, height);
  }
}


function getPositionXY(mouse, e) {
  if (mouse == 'down') {
    prevX = currX; //reset previous position of x and y
    prevY = currY;
    currX = (e.clientX - canvas.offsetLeft) < (e.clientX - canvas.offsetX) ? e.clientX - canvas.offsetX : e.clientX - canvas.offsetLeft; //set new position of x and y
    currY = (e.clientY - canvas.offsetTop) < (e.clientY - canvas.offsetY) ? e.clientY - canvas.offsetY : e.clientY - canvas.offsetTop;

    flag = true;
    dot_draw = true;
    if (dot_draw) { //draw path while mouse is pressed down
      context.textBaseline = "hanging";
      context.beginPath();
      context.fillStyle = font_color;
      context.arc(currX, currY, 2, 0, 2 * Math.PI);
      context.closePath();
      dot_draw = false;
    }
  }
  if (mouse == 'up' || mouse == "out") {
    flag = false; //when mouse is released do nothing
  }
  if (mouse == 'move') {
    if (flag) {
      prevX = currX;
      prevY = currY;
      currX = (e.clientX - canvas.offsetLeft) < (e.clientX - canvas.offsetX) ? e.clientX - canvas.offsetX : e.clientX - canvas.offsetLeft;
      currY = (e.clientY - canvas.offsetTop) < (e.clientY - canvas.offsetY) ? e.clientY - canvas.offsetY : e.clientY - canvas.offsetTop;
      draw();
    }
  }
}

canvas {
  position: absolute;
  top: 0px;
  left: 0px
}

<div>
  <table>
    <!-- some code -->
  </table>
</div>
<div id="sigCanvas">
  <canvas id="signaturepad" style="border:1px solid;"></canvas>
</div>

Answer 1

Поскольку ваш холст может перемещаться, вам нужна последняя позиция, поэтому получите ее в самый последний момент.

Поскольку ваш код работает, когда холст имеет значение (0,0), простое добавление вызова reOffset () и самого начала getPositionXY () может помочь.

Если нетВот как я нахожу щелчок мыши относительно холста:

function locateMouse(evnt)
{
 var x = evnt.pageX;
 var y = evnt.pageY;
 var c = canvas.getBoundingClientRect();
 x = Math.floor(x) - c.left;
 y = Math.floor(y) - c.top;
 /// then use x and y however you want
}