Tenho o seguinte código:
var block = false;
var context;
var drawing;
var rect;
$(function() {
context = $('#canvas')[0].getContext('2d');
drawing = false;
rect = $('#canvas')[0].getBoundingClientRect();
$('#canvas').mousedown(function (evt) {
if(!block) {
context.moveTo(evt.clientX - rect.left, evt.clientY - rect.top);
drawing = true;
}
});
$('#canvas').mouseup( function () {
if(!block)
drawing = false;
});
$('#canvas').mousemove(function (evt) {
if (drawing && !block) {
context.lineTo(evt.clientX - rect.left, evt.clientY - rect.top);
context.stroke();
}
});
});
#canvas {
height: 100%;
width: 100%;
background-color: rgb(230, 230, 230);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" height="500" width="750"></canvas>
Ao testar o código notem que ao clicar e mover o mouse pelo canvas
um desenho e feito, mas o desenho é feito um pouco longe do cursor, só é feito no lugar certo quando a tela está aumentada. Como torno esse responsivo? Independentemente da tela, desenhar no local exato do mouse no canvas
? Notem que o canvas
não ocupa a tela inteira, pois tenho mais coisas na tela