Как лучше всего масштабировать холст с css или js на экране? И как мне сделать ширину холста равной высоте?

Question

Я хочу сделать TI C TA C TOE, и я довольно новичок в js. Я хочу нарисовать X и 0 на холсте. 1. Как мне сделать высоту равной ширине холста? 2. Как лучше всего масштабировать холст, чтобы использовать его, например, на телефонах и иметь такой же опыт?

Answer 1

Вы можете сделать полноэкранный холст и использовать его для отображения своего кода.
Вот шаблон для начала:

HTML

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

CSS

* {
  margin: 0;
}

canvas {
  display: block;
}

JS

window.onload = function() {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      width = canvas.width = window.innerWidth,
      height = canvas.height = window.innerHeight;

  context.fillRect(0, 0, width, height);
};