Desenhos de canvas, como linhas, são desfocados

Eu tenho um

e canvas, que são desenhados usando:

 context.lineWidth = 1; context.strokeStyle = "gray"; 

O desenho parece bastante borrado (lineWidth menos que um cria uma imagem ainda pior) e nada perto da borda do div. É possível obter a mesma qualidade de desenho do HTML usando a canvas?

 var ctx = document.getElementById("canvas").getContext("2d"); ctx.lineWidth = 1; ctx.moveTo(2, 2); ctx.lineTo(98, 2); ctx.lineTo(98, 98); ctx.lineTo(2, 98); ctx.lineTo(2, 2); ctx.stroke(); 
 div { border: 1px solid black; width: 100px; height: 100px; } canvas, div {background-color: #F5F5F5;} canvas {border: 1px solid white;display: block;} 
 
Line on canvas:1px border:
 

Ao desenhar linhas na canvas, você precisa realmente montar os pixels. Foi uma escolha bizarra na API, na minha opinião, mas é fácil trabalhar com:

em vez disso:

 context.moveTo(10, 0); context.lineTo(10, 30); 

faça isso:

 context.moveTo(10.5, 0); context.lineTo(10.5, 30); 

mergulhar no capítulo de lona do HTML5 fala sobre isso muito bem
(procure a checkbox ‘ASK PROFESSOR MARKUP’ cerca de 1/4 do caminho)

Descobri que definir o tamanho da canvas no CSS fazia com que minhas imagens fossem exibidas de maneira borrada.

Tente isto:

  

como por meu post: HTML Blurry Canvas Images

Uma correção ainda mais fácil é apenas usar isto:

 context = canvas.context2d; context.translate(0.5, 0.5); 

De agora em diante as suas coordenadas devem ser ajustadas por esse pixel 0,5.

Eu uso uma canvas de retina e encontrei uma solução que funcionou para mim aqui .

Pequena recapitulação:

Primeiro, você precisa definir o tamanho de sua canvas duas vezes maior do que a desejada, por exemplo:

 canvas = document.getElementById('myCanvas'); canvas.width = 200; canvas.height = 200; 

Então, usando o CSS, você o define para o tamanho desejado:

 canvas.style.width = "100px"; canvas.style.height = "100px"; 

E finalmente você escala o contexto do desenho por 2:

 canvas.getContext('2d').scale(2,2); 

Para evitar esse problema na animação , gostaria de compartilhar uma pequena demonstração .

Basicamente eu estou verificando valores de incremento cada vez e pulando em um conjunto de 1px, removendo os valores float.

HTML:

  

CSS:

  html, body{ height: 100%; } body{ font-family: monaco, Consolas,"Lucida Console", monospace; background: #000; } canvas{ position: fixed; top: 0; left: 0; transform: translateZ(0); } 

JS:

  canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); ctx.translate(0.5, 0.5); var i = 0; var iInc = 0.005; var range = 0.5; raf = window.requestAnimationFrame(draw); function draw() { var animInc = EasingFunctions.easeInQuad(i) * 250; ctx.clearRect(0, 0, 600, 600); ctx.save(); ctx.beginPath(); ctx.strokeStyle = '#fff'; var rectInc = 10 + animInc; // Avoid Half Pixel rectIncFloat = rectInc % 1; // Getting decimal value. rectInc = rectInc - rectIncFloat; // Removing decimal. // console.log(rectInc); ctx.rect(rectInc, rectInc, 130, 60); ctx.stroke(); ctx.closePath(); ctx.font = "14px arial"; ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.fillText("MAIN BUTTON", 65.5 + rectInc, 35.5 + rectInc); i += iInc; if (i >= 1) { iInc = -iInc; } if (i <= 0) { iInc = Math.abs(iInc); } raf = window.requestAnimationFrame(draw); } // Easing EasingFunctions = { // no easing, no acceleration linear: function(t) { return t }, // accelerating from zero velocity easeInQuad: function(t) { return t * t }, // decelerating to zero velocity easeOutQuad: function(t) { return t * (2 - t) }, // acceleration until halfway, then deceleration easeInOutQuad: function(t) { return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t }, // accelerating from zero velocity easeInCubic: function(t) { return t * t * t }, // decelerating to zero velocity easeOutCubic: function(t) { return (--t) * t * t + 1 }, // acceleration until halfway, then deceleration easeInOutCubic: function(t) { return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 }, // accelerating from zero velocity easeInQuart: function(t) { return t * t * t * t }, // decelerating to zero velocity easeOutQuart: function(t) { return 1 - (--t) * t * t * t }, // acceleration until halfway, then deceleration easeInOutQuart: function(t) { return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t }, // accelerating from zero velocity easeInQuint: function(t) { return t * t * t * t * t }, // decelerating to zero velocity easeOutQuint: function(t) { return 1 + (--t) * t * t * t * t }, // acceleration until halfway, then deceleration easeInOutQuint: function(t) { return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t } } 

As linhas são borradas porque o tamanho virtual da canvas é ampliado para o tamanho real do elemento HTML. Para superar esse problema, você precisa ajustar o tamanho virtual da canvas antes de desenhar:

 function Draw () { var e, surface; e = document.getElementById ("surface"); /* Begin size adjusting. */ e.width = e.offsetWidth; e.height = e.offsetHeight; /* End size adjusting. */ surface = e.getContext ("2d"); surface.strokeRect (10, 10, 20, 20); } window.onload = Draw () 
    Canvas size adjusting demo