CODEWITHSUNDEEP
javascripthtml5-canvas
anni saini
anni saini

Reputation: 403

How to increase the resolution of lines in canvas

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): enter image description here 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?

Upvotes: 0

Views: 1887

Answers (3)

Akshit Agarwal
Akshit Agarwal

Reputation: 101

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.

Upvotes: -1

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

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>

Upvotes: 2

somethinghere
somethinghere

Reputation: 17330

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

Upvotes: 2

Related Questions