Canvas Fullscreen 100% causes blurryness

Question

I'm new at canvas an am trying to make a game fullscreen and more importantly responsive to smaller screens but my shapes come out fuzzy as like they've been zoomed in on this is my css and two JavaScript functions

 canvas {
    background: green;
    width: 100%;
    height: 100%;
}

//this function draws
    function drawEverything() {
        colorRect(0, 0, canvas.width, canvas.height, '#C9EEF3', "Main");
        colorRect(50,0,150, 35, "red","firstRow");

}

 // this function gives the layout of the rectangels
    function colorRect(leftX, topY, width, height, drawColor, tag) {
        canvasContext.fillStyle = drawColor;
        canvasContext.fillRect(leftX, topY, width, height);
    }

score 0 · Answer 1 · answered Nov 29 '17 at 18:10

That's because it has been stretched out.

It's important to remember that a canvas essentially has two sizes. One size is the number of pixels in the 'image' that the canvas is. The other, the one you've set with your CSS above, is the size that the browser will render the canvas 'image' to. (A canvas, in many ways, is just a picture that is dynamically drawn by javascript instead of statically stored in a file).

So essentially what you've done is taken a 300x150 picture and told the browser to stretch it out to thousands of pixels. That won't look very good.

If you truly want a 100% dynamic canvas that will match the users screen exactly, you will need to get their window's width and height:

var w = window.innerWidth;
var h = window.innerHeight;

And then use those values to set the canvas' size as in this question.

You will also need to use the height and width in your drawing calculations to make sure you are placing objects in the correct part of the screen to the correct size.

Optionally, you could just set the canvas' width and height to an acceptably high level for large screens and then allow it just to be squished down for smaller screens. Squished images look better than stretched images.

No it is not a good idea to create a canvas resolution higher than the display resolution. Devices are designed to run optimally at the resolution of their screens. Using resolutions higher than that will put undue pressure on resources, RAM, CPU, GPU, and that cascades to the whole system, including power use , not good if a battery run device. Always set the resolution to match the pixel size unless you have a specific reason. — Blindman67, Nov 29 '17 at 18:39

Canvas Fullscreen 100% causes blurryness

1 Answers1