Zeichnen an der Cursor-Position auf Canvas mit JavaScript

Question

Ich versuche, über ein Canvas zu zeichnen, indem ich mit der Maus klicke und ziehe. Mein Problem ist, dass die Linie abgesehen davon, dass sie sehr schlechte Qualität hat (ich möchte einen deutlicheren Rand), nur die Mausposition respektiert, wenn diese bei 0,0 liegt. Wenn ich die Maus in die untere Ecke bewege, vergrößert die Linie ihren Abstand zu ihr genauso stark, wie wenn ich mich in der Mitte des Canvas befände, dann wäre die Linie bereits außerhalb.

Mein Code ist hier: http://jsfiddle.net/ajTkP/12/

Ich werde ihn auch hier posten:

var MDown = false;
var Color = 'blau';

var Canvas = document.getElementById('canvas');
var Context = Canvas.getContext('2d');

Canvas.onselectstart = function() { return false; };
Canvas.unselectable = "on";
Canvas.style.MozUserSelect = "none";

Canvas.onmousedown = function(e) {
    MDown = true;
    Context.strokeStyle = Color;
    Context.lineWidth = 3;
    Context.lineCap = 'round';
    Context.beginPath();
    Context.moveTo(e.pageX - Position(Canvas).left, e.pageY - 5);
}

Canvas.onmouseup = function() { MDown = false; };

Canvas.onmousemove = function(e) { 
    if (MDown) {
        Context.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5);
        Context.stroke();
    }
}

function Position(el) {
    var position = {left: 0, top: 0};
    if (el) {
        if (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            position.left += el.offsetLeft;
            position.top += el.offsetTop;
        }
    }
    return position;
}

Vielen Dank für deine Hilfe!

Answer 1

Sie müssen eine explizite Breite und Höhe auf dem Canvas festlegen. Die Standardabmessungen eines Canvas sind eine Breite von 300 und eine Höhe von 150 (siehe hier die Spezifikation). Durch Festlegen der Breite und Höhe über CSS dehnen Sie lediglich den Canvas aus.

Entweder tun Sie dies:

oder setzen Sie die Breite/Höhe über JavaScript:

canvas.width = 300;
canvas.height = 200;

Siehe das aktualisierte jsfiddle: http://jsfiddle.net/ajTkP/13/

Answer 2

Es sieht so aus, als ob jimr mich bezüglich der Höhe und Breite der Leinwand geschlagen hat.

Die schlechte Qualität der Linie liegt jedoch daran, wie Sie die Linie zeichnen. Sie werden feststellen, dass Sie stroke() bei jedem onmousemove-Ereignis aufrufen. Bedenken Sie, dass der Pfad der Linie von beginPath() bis closePath() verfolgt wird, sodass Sie im Grunde genommen dieselbe Linie mehrmals umreißen (jedes Mal, wenn sich Ihre Maus bewegt). Dies führt zu den kantigen Linien (blockig aussehend), anstelle der glatten Anti-Aliasing-Linien, die Sie erwarten.