当窗口更改大小时，缩放全屏画布以适合内容

Question

Basically, I have a canvas that draws a grid. When the window changes sizes, it refreshes the grid and scene to fill the entire screen with a grid.

When I resize my browser window to a smaller size, I would like the grid and everything inside the canvas to shrink with it, while keeping the grid boxes a square shape. Websites like Agar.io use this with their canvas.

 var canvas = document.getElementById("mainCanvas"); var ctx = canvas.getContext("2d"); function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } function createMap() { var gridOptions = { majorLines: { separation: 30, color: '#e8e8e8' } }; drawGridLines(canvas, gridOptions.majorLines); return; } function drawGridLines(canvas, lineOptions) { var iWidth = canvas.width; var iHeight = canvas.height; ctx.strokeStyle = lineOptions.color; ctx.strokeWidth = 1; ctx.beginPath(); var iCount = null; var i = null; var x = null; var y = null; iCount = Math.floor(iWidth / lineOptions.separation); for (i = 1; i <= iCount; i++) { x = (i * lineOptions.separation); ctx.moveTo(x, 0); ctx.lineTo(x, iHeight); ctx.stroke(); } iCount = Math.floor(iHeight / lineOptions.separation); for (i = 1; i <= iCount; i++) { y = (i * lineOptions.separation); ctx.moveTo(0, y); ctx.lineTo(iWidth, y); ctx.stroke(); } ctx.closePath(); return; } function refresh() { resize(); createMap(); } window.onresize = function() { refresh(); } refresh(); 

 body, html { align-content: center; overflow: hidden; border: 0; margin: 0; padding: 0; } #mainCanvas { top: 0; left: 0; position: absolute; overflow: hidden; border: 0; margin: 0; padding: 0; } 

 <canvas id="mainCanvas"></canvas> 

In other words, the view of the canvas is like a bird's eye, and if there are 10 grid boxes from the center to the left side of the screen. When the window is enlarged completely, the screen would keep that same number or grid boxes from the center to the left side as it would when the browser window is resized to a smaller state. (Of course, depending on the screen ratio, it could be 10 grid boxes more or less, but roughly around there)

I tried setting the canvas size with CSS to 100% on the width and height, but that caused the grid squares to become blurry rectangles.

What can I add to cause the elements in the canvas to shrink and grow with the windows size?

Answer 1

Here is a sample where the elements in the canvas shrink and grow with the windows size:

<style>body{margin:0}</style>
<canvas id="mainCanvas"></canvas>


<script>
var canvas = document.getElementById("mainCanvas");
var ctx = canvas.getContext("2d");

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var gridOptions = {
        majorLines: {
        separation: 20,
        color: '#e8e8e8'
        }
    };
    drawGridLines(canvas, gridOptions.majorLines);
}

function drawGridLines(canvas, lineOptions) {
    ctx.strokeStyle = lineOptions.color;
    ctx.strokeWidth = 1;
    ctx.beginPath();

    var size = Math.floor(canvas.width / lineOptions.separation);
    for (var i = 1; i <= lineOptions.separation; i++) {
        var x = (i * size);
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    for (var i = 1; i <= Math.floor(canvas.height / size); i++) {
        var y = (i * size);
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }
    ctx.closePath();
}

window.onresize = function() { resize(); }
resize();
</script>

Here is a live sample:

https://raw.githack.com/heldersepu/hs-scripts/master/HTML/canvasResize2.html