Position auf Leinwand offsetTop & offsetLeft

Question

Probleme beim Abrufen der Position auf der Zeichenfläche für diese Zeichen-App. Fehlerzustände xPos, yPos nicht definiert. Zeichnet auf der Leinwand, aber die Linienposition ist deaktiviert. Was vermisse ich? Sie können den Code in dem folgenden Code beigefügt finden Sie unter:

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
context.lineWidth = 2; 
 
var down = false; 
 

 
function draw(e) { 
 
    xPos = e.clientX - canvas.offsetLeft; 
 
    yPos = e.clientY - canvas.offsetTop; 
 

 
    if (down === true) { 
 
    context.lineTo(xPos, yPos); 
 
    context.stroke(); 
 
    } 
 
} 
 

 
canvas.addEventListener('mousemove', draw); 
 

 
canvas.addEventListener('mousedown', function() { 
 
    down = true; 
 
    context.beginPath(); 
 
    context.moveTo(xPos, yPos); 
 
    canvas.addEventListener("mousemove", draw); 
 
}); 
 

 
canvas.addEventListener('mouseup', function() { 
 
    down = false; 
 
});

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
html { 
 
    -ms-text-size-adjust: 100%; 
 
    -webkit-text-size-adjust: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    font: 16px/1 sans-serif; 
 
    font-family: 'Questrial', sans-serif; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-font-smoothing: antialiased; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
p, 
 
blockquote, 
 
figure, 
 
ol, 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
main, 
 
li { 
 
    display: block; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4 { 
 
    font-size: inherit; 
 
} 
 
strong { 
 
    font-weight: bold; 
 
} 
 
a, 
 
button { 
 
    color: inherit; 
 
    transition: .3s; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
button { 
 
    overflow: visible; 
 
    border: 0; 
 
    font: inherit; 
 
    -webkit-font-smoothing: inherit; 
 
    letter-spacing: inherit; 
 
    background: none; 
 
    cursor: pointer; 
 
} 
 
::-moz-focus-inner { 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
:focus { 
 
    outline: 0; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    border: 0; 
 
} 
 
section { 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    margin: 20px auto; 
 
} 
 
section #canvas { 
 
    width: 800px; 
 
    height: 500px; 
 
    display: block; 
 
    border: 1px solid black; 
 
    margin: 10px auto 0px; 
 
} 
 
section #drawingTools { 
 
    width: 800px; 
 
    height: 80px; 
 
    margin: 0 auto; 
 
} 
 
section #drawingTools #colors { 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 
section #drawingTools #colors button { 
 
    width: 20%; 
 
    height: 20px; 
 
    float: left; 
 
} 
 
section #drawingTools #colors button:hover { 
 
    opacity: 0.5; 
 
} 
 
section #drawingTools #colors #black { 
 
    background: black; 
 
} 
 
section #drawingTools #colors #white { 
 
    background: white; 
 
} 
 
section #drawingTools #colors #red { 
 
    background: red; 
 
} 
 
section #drawingTools #colors #green { 
 
    background: green; 
 
} 
 
section #drawingTools #colors #blue { 
 
    background: blue; 
 
} 
 
section #drawingTools #otherTools { 
 
    width: 100%; 
 
    height: 60px; 
 
} 
 
section #drawingTools #otherTools button { 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 5px; 
 
    background: #303030; 
 
    color: white; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 5px; 
 
    cursor: pointer; 
 
} 
 
section #drawingTools #otherTools button:hover { 
 
    font-size: 13px; 
 
}

<section> 
 
    <div id="drawingTools"> 
 
    <div id="colors"> 
 
     <button id="black"></button> 
 
     <button id="white"></button> 
 
     <button id="red"></button> 
 
     <button id="green"></button> 
 
     <button id="blue"></button> 
 
    </div> 
 
    <div id="otherTools"> 
 
     <button id="clearCanvas">Clear Canvas</button> 
 
    </div> 
 
    </div> 
 
    <canvas id="canvas"></canvas> 
 
</section>

Answer 1

Sie sind tatsächlich die Leinwand Skalierung.

Canvases sind eingebettet und berücksichtigen keine externen Werte, die die Zeichenfunktionen anpassen, sondern nur die Eigenschaftswerte, die auf dem Canvas-Tag /> selbst enthalten sind.

section #canvas { 
    //Remove width: 800px; 
    //Remove height: 500px; 
    display: block; 
    border: 1px solid black; 
    margin: 10px auto 0px; 
} 

Tun Sie etwas wie.

canvas.width = 800; 
canvas.height = 500; 
window.onresize = function onresize() { 
    //canvas.width = window.innerWidth;//100% 
    //canvas.height = window.innerHeight;//100% 
}