0

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

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 пикселей), но сам он занимал как бы всю страничку, то есть был растянут.

1
  • А если на весь экран, но без потери соотношения?
    – ZAYka
    12 мая в 2:27

1 ответ 1

0

Указать ему размеры в 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>

4
  • Спасибо за ответ! Возникла такая проблемка, так как (обычно) ширина экранов больше чем высота, то, находящиеся внутри канваса элементы как бы тянутся по ширине. Можно этого избежать? 30 янв 2021 в 18:28
  • @KarlosMargaritos О_о одно условие противоречит другому) Оно или не квадратное, растянутое на весь экран, или квадратное, но не на весь экран. Можно например потянуть только на всю высоту, или на всю ширину [ через JS взяв меньшее из двух ], оставив квадратным. 30 янв 2021 в 19:08
  • @KarlosMargaritos Добавил второй вариант для квадрата. Может есть что попроще, не додумался. Также можно придумать другой вариант: растянуть на весь экран, но сместить начало координат так, чтобы 1000x1000 попадало в центр. Также, считая innerWidth / innerHeight через JS. Но если в "минусовых" координатах ничего не должно рисоваться, легче залить всё, что не попадает в квадрат - тем же цветом, что и у canvas, делая вид, что это его часть. 30 янв 2021 в 19:33
  • Спасибо большое за примеры, буду думать, может как то поиграть со свойством scale css или отобразить только часть канваса 30 янв 2021 в 19:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.