캔버스의 전체 공간을 사용할 수 없습니다.

Question

캔버스의 전체 공간을 그릴 필요가 있습니다. 그러나 여기서 캔버스의 위쪽과 왼쪽을 사용하여 그릴 수 없습니다. 나는 css에서 약간의 변화를 시도하지만 여전히 운이 없다. 도와주세요. p.s. 버튼을 클릭하면 캔버스가 팝업됩니다.

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