Html5 Canvas - 动态表将画布向下推，现在画面/图像没有显示

Question

I am using HTML5 Canvas with JavaScript. In the HTML layout, the canvas has a dynamic table above it. The table size is not static and changes at run-time depending on the parameter given. The problem I have is that when the table becomes long, it pushes the canvas down and the drawn image no longer shows. I know the drawn image is there because when I apply the following style code:

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

the canvas moves to the top and the drawn image appears. Also, when the table is short, the canvas works fine.

I have tried using absolute and relative positioning on the table and canvas elements but that is not helping. I have tried getting the height of the table and applying a margin top to the canvas at run time but that didn't work. I have tried offsets, but they are not working either. I don't know what to do in order to keep the drawn image with the canvas element.

 //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

Since your canvas can move around, you want the latest position, so get it at the last possible instant.

Since your code works when the canvas is at (0,0), just adding a call to reOffset() and the very beginning of getPositionXY() might do the trick.

If not, here is how I locate a mouse click relative to the canvas:

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
}