Динамически ширину холста точно равняться высоте без масштабирования Distoration

Question

Раньше я бегала эту JavaScript, чтобы изменить ширину моего холста элемента к высоте окна:

let board = document.getElementById("board"); 
function resize() { 
    // Our canvas must cover full height of screen 
    // regardless of the resolution 
    var height = window.innerHeight; 

    // So we need to calculate the proper scaled width 
    // that should work well with every resolution 
    var ratio = board.width/board.height; 
    var width = height * ratio; 

    board.style.width = width+'px'; 
    board.style.height = height+'px'; 

    window.display.w = width; 
    window.display.h = height; 
} 

window.addEventListener('load', resize, false); 
window.addEventListener('resize', resize, false); 

С тех пор мои требования к проектированию эволюционировали для того чтобы потребовать дополнительные холсты по обе стороны от этого. Таким образом, я добавил

<center> 
<div class="container"> 
<canvas id="info" class="panel"></canvas> 
<canvas id="board" class="panel"></canvas> 
<canvas id="actions" class="panel"></canvas> 
</div> 

и теперь мои холсты рисуют искаженные с вытянутой высотой. Я пытаюсь сделать 5 строк программно в коде холста, и показано только 3.

.container { 
    display:flex; 
    height:100vh; 
    align-items:flex-start; 
    flex-grow: 0; 
} 

.panel { 
    display:flex; 
} 

#board { 
    width:50%; 
    height:100vh; 
    background:#9b59b6; 
} 

#info { 
    width:25%; 
    height:100%; 
    background:#3498db; 
} 

#actions { 
    width:25%; 
    height:100%; 
    background:#1abc9c; 
} 

Как использовать Flexbox назначить ширину моего board холста элемента таким образом, что он не будет растягиваться рисунок?

Раньше мой рисунок был такой шкале:

Я также попытался установить ширину платы в 100vh и результат не выглядит сильно отличается.

Answer 1

Внутри функции обратного вызова resize() также убедитесь, что вы задали размер холста bitmap. В настоящее время установлен только размер элемента. Это может потребовать некоторой реструктуризации в отношении того, как разрабатывается плата, но устраняет проблему, которую вы видите сейчас.

function resize() { 
    // Our canvas must cover full height of screen 
    // regardless of the resolution 
    var height = window.innerHeight; 

    // So we need to calculate the proper scaled width 
    // that should work well with every resolution 
    var ratio = board.width/board.height; 
    var width = height * ratio; 

    board.width = width;  // make sure bitmap is updated as well 
    board.height = height; 

    board.style.width = width+'px'; 
    board.style.height = height+'px'; 

    window.display.w = width; 
    window.display.h = height; 
} 

Вы можете альтернативно получить размер холста элемента (CSS) с помощью:

var rect = board.getBoundingClientRect(); 

Затем установите размер растрового изображения, соответственно (знать границы и дополнения, которые влияют на размер элемента):

board.width = rect.width; 
board.height = rect.height;