Trama de canvas HTML5() gruesa y borrosa

Question

Estoy tratando de permitir que el usuario dibuje un rectángulo en el lienzo (como un cuadro de selección). Estoy obteniendo algunos resultados ridículos, pero luego noté que incluso probando el código de mi referencia here, obtengo grandes líneas borrosas y no sé por qué.

alojado en dylanstestserver.com/drawcss. el javascript está en línea para que pueda verificarlo. Estoy usando jQuery para simplificar obtener las coordenadas del mouse.

Answer 1

Por alguna razón, su lienzo está estirado. Como tiene su propiedad css width establecida en 100%, la está estirando desde algún tipo de tamaño nativo. Es la diferencia entre utilizar la propiedad css width y el atributo width en la etiqueta <canvas>. Es posible que desee intentar usar un poco de Javascript para que se llene el visor (see jQuery .width()):

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

Answer 2

No ha indicado el tamaño del lienzo en píxeles, por lo que se amplía. Es 300x150 aquí. Intente configurar el ancho, alto

Answer 3

El problema borroso ocurrirá si usa css para establecer el alto y el ancho del lienzo en lugar de configurar el alto y el ancho en el elemento lienzo.

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

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

Answer 4

En las pantallas, también es necesario para escalar (además de la respuesta aceptada):

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

Answer 5

He encontrado la mina razón era borrosa era que había una ligera discrepancia entre la anchura de línea y el ancho de CSS

Tengo dos parámetros de ancho/alto en línea Y ancho y alto de css asignados a mi lienzo, porque necesito mantener sus dimensiones físicas estáticas, al tiempo que aumente sus dimensiones en línea para las pantallas de retina.

Comprueba que los tuyos son los mismos si tienes una situación como la mía.

Answer 6

El problema del tamaño de CSS mencionado en estos comentarios es correcto, pero otra cosa más sutil que puede causar líneas borrosas es olvidarse de llamar al hacer una llamada al context.beginPath() antes de dibujar una línea. Sin llamar a esto, aún obtendrá una línea, pero no se suavizará, lo que hace que la línea se vea como una serie de pasos.

Answer 7

La manera de hacerlo es fijar el elemento de lienzo para una anchura y altura en el css, y a continuación, la canvas.width = canvas.clientWidth y canvas.height = canvas.clientHeight

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