canvas line is blurry in html/javascript

Question

everything says "even-width lines don't have this problem" but they DO
here's my code:

var c = document.getElementById("clamvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.lineTo(1728, 877);
ctx.stroke();

canvas
{
 width:90%;
 height:90%;
 padding: 0;
    margin: auto;
    display: block;
 border:5px solid #000000;
 position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<canvas id="clamvas"></canvas>

score 1 · Accepted Answer · answered Jan 09 '20 at 18:18

That's because you're setting width and height through css; that just stretches the canvas element including it's contents.

Use width and height attributes to properly size a canvas element:

var c = document.getElementById("clamvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.lineTo(1728, 877);
ctx.stroke();

canvas {
    padding: 0;
    margin: auto;
    display: block;
    border:5px solid #000000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<canvas id="clamvas" wdith="200" height="200"></canvas>

canvas line is blurry in html/javascript

1 Answers1