Javascript 无法使用画布的全部空间

我需要用画布的全部空间来画画。但这里无法使用画布的顶部和左侧进行绘制。我尝试在css中进行一些更改，但仍然没有成功。请帮忙。 p、 单击按钮，画布将弹出

<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
    <div class="cancel" onclick="closePopup();"></div>
    <canvas id="canvas1" width="750" height="720" style="border: 1px solid black"></canvas>
</div>

<style>
.popup{
    position:absolute;
    top:0px;
    left:0px;
    margin:0px;
    width: 900px;
    height: 750px;
    font-family:verdana;
    font-size:13px;
    padding:2px;
    background-color:white;
    border:2px solid grey;
    z-index:100000000000000000;
    display:none;
    opacity:0.6;
    filter:alpha(opacity=60);
    margin-left: 300px;
    margin-top: 90px; 
    overflow: auto; 
    }

.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
    }

.cancel:hover{
    background:rgb(255,50,50);
    }
</style>
<script>
function openPopup() {
    document.getElementById('test').style.display = 'block';
}
function closePopup() {
    document.getElementById('test').style.display = 'none';
}

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var isPressed = false;
var mx = 4, my = 4;

function move(e) {
  getMouse(e);
  if (isPressed) {
    ctx.lineTo(mx, my);
    ctx.stroke()
  }
}

function up(e) {
  getMouse(e);
  isPressed = false;
}

function down(e) {
  getMouse(e);
  ctx.beginPath();
  ctx.moveTo(mx, my);
  isPressed = true;
}

can.onmousemove = move;
can.onmousedown = down;
can.onmouseup = up;

// waaaay oversimplified:
function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX;
    my = e.pageY;

}

</script>

点击这里
.弹出窗口{
位置：绝对位置；
顶部：0px；
左：0px；
边际：0px；
宽度：900px；
高度：750px；
字体系列：verdana；
字体大小：13px；
填充：2px；
背景色：白色；
边框：2倍纯色灰色；
z指数：1000000000000000；
显示：无；
不透明度：0.6；
过滤器：α（不透明度=60）；
左边距：300px；
边缘顶部：90像素；
溢出：自动；
}
.取消{
显示：相对；
光标：指针；
保证金：0；
浮动：对；
高度：10px；
宽度：14px；
填充：0 5px 0；
背景色：红色；
文本对齐：居中；
字体大小：粗体；
字体大小：11px；
颜色：白色；
边界半径：3px；
z指数：1000000000000000；
}
.取消：悬停{
背景：rgb（255,50,50）；
}
函数openPopup（）{
document.getElementById（'test'）.style.display='block'；
}
函数closePopup（）{
document.getElementById（'test'）.style.display='none'；
}
var can=document.getElementById（'canvas1'）；
var ctx=can.getContext（'2d'）；
var isPressed=false；
var mx=4，my=4；
功能移动（e）{
小鼠（e）；
如果（显示）{
ctx.lineTo（mx，my）；
ctx.stroke（）
}
}
功能启动（e）{
小鼠（e）；
isPressed=false；
}
功能下降（e）{
小鼠（e）；
ctx.beginPath（）；
ctx.moveTo（mx，my）；
isPressed=true；
}
can.onmousemove=移动；
can.onmousedown=向下；
can.onmouseup=up；
//Waaay过于简单化：
函数getMouse（e）{
变量元素=can，偏移量=0，偏移量=0；
mx=e.pageX；
my=e.pageY；
}

绘图点未与鼠标指针同步。 这就是为什么不能在画布的左侧和顶部绘制的原因，因为如果尝试在左侧边缘附近绘制某个对象，鼠标已经离开了画布

请注意，如何获取绘图点的当前位置：

function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX;
    my = e.pageY;
}

变量

e

引用mouseEvent对象。pageX是指鼠标与页面左侧之间的距离，而不是画布。因此，您应该从

mx

减去画布的左偏移量，并对

my

执行相同的操作，以便绘图点正好位于您想要的位置

一个简单的解决方案： 将画布的

边距

、

边框

和

填充

设置为0

.popup{
    //everything else..
    boder: 0;
    margin-left: 0px;
    margin-top: 0px;
    }

更好的解决方案： 减去左偏移量至

mx

和

my

function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX - 305;
    my = e.pageY - 95;

    //Dynamically getting those padding and margin and border would be better!
}

可能重复的