javascript - getcontext - Trazo de canvas HTML5() grueso y difuso

rotate js

Question

Estoy tratando de permitir que el usuario dibuje un rectángulo en el lienzo (como un cuadro de selección). Obtuve 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é.

está 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

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 2

El problema de dimensionamiento css mencionado en estos comentarios es correcto, pero otra cosa más sutil que puede causar líneas borrosas es olvidarse de llamar haciendo una llamada a 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 3

En las pantallas de retina también necesita escalar (además de la respuesta aceptada):

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

Answer 4

Encontré que la razón por la cual el mío era borroso era que había una ligera discrepancia entre el ancho en línea y el ancho de CSS.

Tengo dos parámetros de ancho / alto en línea Y ancho / 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 5

La forma en que lo hago es establecer el elemento canvas en un ancho y alto en el css, y luego establecer el 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");

Answer 6

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

Answer 7

Por alguna razón, su lienzo se estira. Debido a que tiene su width propiedad CSS establecido en 100% , lo está estirando desde algún tipo de tamaño nativo. Es la diferencia entre usar la propiedad de width css y el atributo de width en la etiqueta <canvas> . Es posible que desee intentar usar un poco de javascript para que ocupe toda la ventana gráfica (consulte jQuery .width () ):

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