0

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

1 Resposta 1

0

Removendo

height:  100%;
width: 100%;

Funcionou perfeitamente aqui

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .