How to increase the resolution of lines in canvas

Question

window.onload=function(){
    var c = document.getElementById('canvas'),
        ctx = c.getContext('2d'),
        x=0, y=0, cnt=1;
    for(var i=0;i<(window.innerWidth)/10;i++){
        ctx.moveTo(x, y); x+=5;
        if(cnt%2){
            y=5; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }else{
            y=0; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }
    }
}

<canvas id="canvas" style="width:100%; height:250px"></canvas>

If you run the above code then the resolution of lines in the zig-zag pattern in the if fine but in here you can see the image the resoultion of this pattern is very poor (please click on this image to view this problem): what i have tried is that i have changed the condition (window.innerWidth)/10 to (winodw.innerWidth)/4 and x+=5 to x+=2

but what it does is that it makes the line so thick and bad that you don't want to see it.

so, what should i do to increase the resolution of the lines of the pattern?

Try setting `width` & `height` for `canvas` element either using inline `width-height` attribute(not css) or using `JavaScript` — Rayon, Nov 30 '15 at 11:07

score 2 · Answer 1 · answered Nov 30 '15 at 11:17

There are a couple of things, but mostly it comes down to this: you are drawing at a width of 100%, which is stretching the default size of a canvas you are drawing in - thats why it blurs. Set your width correctly using javascript and the sharpness increases. The only thing is, a difference of 5 pixels is barely noticeable, so you have to increase your size to something more... average. I have opted for 1/100 of the windows width, but you can turn it into anything.

// For safety, use event listeners and not global window method overwriting.
// It will become useful if you have multiple scripts you want to
// execute only after loading them!
window.addEventListener('DOMContentLoaded', function(){
    var c = document.getElementById('canvas'),
        ctx = c.getContext('2d'),
        x = 0, y = 0;
    // Set the correct width and height
    c.width = window.innerWidth;
    c.height = window.innerWidth / 100;
    // Use moveTo once, then keep drawing from your previous lineTo call
    ctx.moveTo(x, y);
    // You only need your x value here, once we are off screen we can stop drawing and end the for loop!
    for(; x < window.innerWidth; x += window.innerWidth / 100){
        // Use lineTo to create a path in memory
        // You can also see if your y needs to change because y = 0 = falsy
        ctx.lineTo(x, (y = y ? 0 : window.innerWidth / 100));
    }
    // Call stroke() only once!
    ctx.stroke();
    // And for safety, call closePath() as stroke does not close it.
    ctx.closePath();
}, false);

<canvas id="canvas"></canvas>
<!-- Remove all styling from the canvas! Do this computationally -->

AndreaBogazzi · Accepted Answer · 2015-11-30T12:35:41.180

2

Just make sure your canvas element is as big as you are displaying it. i added c.width = windows.innerWidth and also c.heigth = 250 and the resolution looks correct now.

window.onload=function(){
    var c = document.getElementById('canvas'),
        ctx = c.getContext('2d'),
        x=0, y=0, cnt=1;
        c.width = window.innerWidth;
        c.height = 250;
    for(var i=0;i<(window.innerWidth);i++){
        ctx.moveTo(x, y); x+=5;
        if(cnt%2){
            y=5; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }else{
            y=0; cnt++;
            ctx.lineTo(x, y);ctx.stroke();
        }
    }
}

<canvas id="canvas" style="width:100%; height:250px"></canvas>

edited Nov 30 '15 at 12:35

answered Nov 30 '15 at 11:59

AndreaBogazzi

14,323
3
38
63

Its still blurry because of the `style="height: 250px"` bit, if he had used `height="250"` it would not be an issue, but as you might see, he actually uses a difference of only `5px` in his drawing, while its more aking to `25px` in the end result, which means it is still stretched and therefor blurry, although less so now. – somethinghere Nov 30 '15 at 12:21
oh... this i do not get why. why the height is still stretched? – AndreaBogazzi Nov 30 '15 at 12:31
The default height for a canvas (when not set) is `150px` (Source: https://developer.mozilla.org/en/docs/Web/HTML/Element/canvas). Increasing that to `250px` using a `style` (and not the actual `height`attribute) makes it 166% of the height, therefor stretching it. – somethinghere Nov 30 '15 at 12:33
1

oh i knew about the natural width/height, i did not know that the style would just stretch it as an image. thanks! – AndreaBogazzi Nov 30 '15 at 12:34

score -1 · Answer 3 · answered Oct 04 '17 at 11:58

maybe you can find your ans here

Full-screen Canvas is low res

basically it summarizes that instead of setting height and width in the css, you should set it via html (inside the canvas element via width and height attr) or via javaScript.

because when doing it in css, you are basically scaling it and thus reducing the resolution, so you have to mention the actual size in html element and not scale it in css.

How to increase the resolution of lines in canvas

3 Answers3