Растянуть canvas элемент (имеющий размер) на весь экран

Question

Всем привет! Есть ли возможность растянуть канвас элемент на весь экран? фишка в том, что он имеет размер и мне не хотелось бы его менять:

var canvas = document.getElementById('canvas');
var canvasWidth  = 1000;
var canvasHeight = 1000;
var ctx = canvas.getContext('2d');

canvas { 
    margin: auto;
    display: block;
  position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    image-rendering: pixelated;
}

<canvas id="canvas" width="1000px" height="1000px"></canvas>

То есть, хотелось бы, чтобы вот этот размер сохранился ( 1000 на 100 пикселей), но сам он занимал как бы всю страничку, то есть был растянут.

Answer 1

Указать ему размеры в CSS: 100vw — это ширина окна, 100vh — высота.

let ctx = document.getElementById("canvas").getContext("2d");

ctx.fillRect(900, 900, 100, 100);
// Демо, как выглядит 100x100 квадрат в углу.

body {
  background-color: #169;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

<canvas id="canvas" width="1000" height="1000"></canvas>

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

(function() {

  let style = document.createElement("style");
  
  let css = [
    "#canvas { width: 100vw }", // Если ширина окна меньше высоты,
    "#canvas { height: 100vh }", // Если высота меньше ширины.
  ];
  
  document.head.appendChild(style);
  
  update_css_size();
  window.addEventListener("resize", update_css_size);
  
  function update_css_size() {
    let index = Number(innerWidth > innerHeight); // 0 или 1
    style.textContent = css[index];
  }
  
})();

/***/

let ctx = document.getElementById("canvas").getContext("2d");
ctx.fillRect(900, 900, 100, 100);

canvas {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background-color: #169;
}

<canvas id="canvas" width="1000" height="1000"></canvas>

БЛОГ НА HUSL

Растянуть canvas элемент (имеющий размер) на весь экран

Ответы (1 шт):