Невозможно использовать полное пространство холста

Question

Мне нужно использовать полное пространство холста для рисования. Но здесь невозможно использовать верхний и левый холсты для рисования. Я пытаюсь внести некоторые изменения в css, все равно не повезло. Пожалуйста помоги. стр. Нажав на кнопку, появится холст.

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

Answer 1

Точка рисования не синхронизирована с указателем мыши. Вот почему вы не можете рисовать в левой части и в верхней части холста, потому что мышь уже вышла из холста, если вы попытаетесь нарисовать что-то рядом с левым краем.

Обратите внимание, что, как вы получите текущее положение точки рисования:

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

переменная e относится к объекту MouseEvent. и e.pageX означает расстояние между мышью и левой стороной страницы, а не вашими CANVAS. Таким образом, вы должны минус левое смещение холста от mx и сделать то же самое с my, чтобы точка рисования находилась прямо там, где вы хотите.

Одно простое решение: набор канвы margin, border и padding 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! 
}