Canvas drawings, like lines, are blurry

Question

I have a

and canvas, which is drawn using:

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


        

相关标签:

Answer 1

HTML:

<canvas class="canvas_hangman"></canvas> 

JS:

function setUpCanvas(){
      canvas = document.getElementsByClassName("canvas_hangman")[0];
      ctx = canvas.getContext('2d');
      ctx.translate(0.5, 0.5);

      // Set display size (vw/vh).
      var sizeWidth = 80 * window.innerWidth / 100,
          sizeHeight = 100 * window.innerHeight / 100 || 766; 

      // console.log(sizeWidth, sizeHeight);
      //Setting the canvas site and width to be responsive 
      canvas.width = sizeWidth;
      canvas.height = sizeHeight;
      canvas.style.width = sizeWidth;
      canvas.style.height = sizeHeight;
 }
 window.onload = setUpCanvas();

This perfectly sets up your HTML canvas to draw on, in a responsive manner too:)

Answer 2

As @langpavel mentioned in a comment, the Mozilla website has example code for how to correct resolution in a canvas: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

// Set display size (css pixels).
var size = 200;
canvas.style.width = size + "px";
canvas.style.height = size + "px";

// Set actual size in memory (scaled to account for extra pixel density).
var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = size * scale;
canvas.height = size * scale;

// Normalize coordinate system to use css pixels.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = size / 2;
var y = size / 2;

var textString = "I love MDN";
ctx.fillText(textString, x, y);

Answer 3

Even easier fix is to just use this:

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

From here on out your coordinates should be adjusted by that 0.5 pixel.

Answer 4

When drawing lines in canvas, you actually need to straddle the pixels. It was a bizarre choice in the API in my opinion, but easy to work with:

instead of this:

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

do this:

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

dive into HTML5's canvas chapter talks about this nicely
(look for the 'ASK PROFESSOR MARKUP' box about 1/4th of the way down)

Answer 5

in order to get rid of the blurryness you need to set the size of the canvas in two manners: first withcanvas.width = yourwidthhere; and canvas.height = yourheighthere; second by setting the css attribute either by js or a stylesheet

Answer 6

I found that setting the canvas size in CSS caused my images to be displayed in a blurry manner.

Try this:

<canvas id="preview" width="640" height="260"></canvas>

as per my post: HTML Blurry Canvas Images