HTML5-Leinwandstrich () dick und unscharf

Ich versuche, dem Benutzer zu ermöglichen, ein Rechteck auf der Leinwand zu zeichnen (wie ein Auswahlfeld). Ich bekomme einige lächerliche Ergebnisse, aber dann ist mir aufgefallen, dass ich sogar nur den Code aus meiner Referenz ausprobiert habe hierIch bekomme riesige unscharfe Linien und weiß nicht warum.

es wird gehostet bei dylanstestserver.com/drawcss. Das Javascript ist inline, so dass Sie es überprüfen können. Ich verwende jQuery, um das Abrufen der Mauskoordinaten zu vereinfachen.

Das unscharfe Problem tritt auf, wenn Sie CSS verwenden, um die Leinwandhöhe und -breite festzulegen, anstatt Höhe und Breite im Leinwandelement festzulegen.

<style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

Aus irgendeinem Grund ist Ihre Leinwand gedehnt. Weil Sie seine CSS-Eigenschaft haben width einstellen 100%, es dehnt es von einer Art nativer Größe aus. Es ist der Unterschied zwischen der Verwendung von css width Eigentum und die width Attribut auf der <canvas> Schild. Vielleicht möchten Sie versuchen, ein wenig Javascript zu verwenden, damit es das Ansichtsfenster ausfüllt (siehe jQuery .width()):

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...

Ich setze das Canvas-Element im CSS auf eine Breite und Höhe und setze dann canvas.width = canvas.clientWidth und canvas.height = canvas.clientHeight

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");

Sie haben die Leinwandgröße nicht in Pixeln angegeben, daher wird sie vergrößert. Hier ist es 300 x 150. Versuchen Sie, die Breite und Höhe einzustellen

Auf Retina-Displays müssen Sie (zusätzlich zur akzeptierten Antwort) auch skalieren:

var context = canvas.getContext('2d');
context.scale(2,2);

Das in diesen Kommentaren erwähnte CSS-Größenproblem ist korrekt, aber eine weitere subtilere Sache, die zu unscharfen Linien führen kann, ist das Vergessen, einen Anruf zu tätigen context.beginPath() vor dem Zeichnen einer Linie. Ohne dies aufzurufen, erhalten Sie immer noch eine Linie, aber sie wird nicht geglättet, wodurch die Linie wie eine Reihe von Schritten aussieht.

Ich fand heraus, dass meins verschwommen war, weil es eine leichte Diskrepanz zwischen der Inline-Breite und der CSS-Breite gab.

Ich habe meiner Leinwand sowohl Inline-Breite/Höhe-Parameter als auch CSS-Breite/Höhe zugewiesen, weil ich ihre physischen Abmessungen statisch halten muss, während ich ihre Inline-Abmessungen für Retina-Bildschirme erhöhe.

Überprüfen Sie, ob Ihre gleich sind, wenn Sie eine Situation wie meine haben.