Как изменить размер холста, чтобы он соответствовал одному содержимому независимо от размера

Question

Я создаю концепцию игры с помощью этого кода: https://pastebin.com/pMNR1CfH. Однако, в зависимости от размера окна, на экране будет отображаться больше или меньше объектов. Как изменить его размер, чтобы вид оставался прежним?

У меня есть эти переменные, чтобы попытаться масштабировать холст, но я не знаю, где разместить функцию canvas.scale.

        var scalewidth = window.innerWidth / 1920;
        var scaleheight = window.innerHeight / 969;

спасибо

Answer 1

Я предполагаю, что вы хотите:

• сохранить соотношение сторон графики в такт (круг не должен отображаться как эллипс)
• полностью визуализировать область (0,0) - (1920,969) используется для создания чертежа
• центрируйте графику, когда есть свободное место в одном из двух измерений окна просмотра.

Вот как это сделать:

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
window.addEventListener('resize', draw);

function draw() {
    // Get current 
    let viewSizes = [canvas.width = window.innerWidth, canvas.height = window.innerHeight];

    // Reset the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transformation
    ctx.clearRect(0, 0, ...viewSizes); // wipe

    // Determine scale factor
    let worldSizes = [1920, 969];
    let scales = worldSizes.map((worldSize, i) => viewSizes[i] / worldSize);
    let minScale = Math.min(...scales);

    // Determine shift in order to center the content
    let shift = scales.map((scale, i) => (viewSizes[i] - minScale * worldSizes[i]) / 2);
    ctx.setTransform(minScale, 0, 0, minScale, ...shift);

    // Draw the contents using world coordinates (0,0)-(1920,969): This is demo
    ctx.beginPath();
    ctx.arc(960, 485, 484, 0, 2 * Math.PI);
    ctx.fillStyle = "blue";
    ctx.fill(); 
    ctx.stroke(); 
    ctx.beginPath();
    ctx.rect(10, 455, 1900, 60);
    ctx.fillStyle = "red";
    ctx.fill(); 
    ctx.stroke(); 
}

draw();

body { margin: 0; overflow: hidden }

<canvas></canvas>