使用 css 或 js 将 Canvas 缩放到屏幕的最佳方法是什么？ 以及如何使画布的宽度等于高度？

Question

I want to make an TIC TAC TOE and im pretty new to js. I want to draw the x's and 0's to the canvas. 1. How do I make the height equal to the width of the canvas? 2. What is the best way to scale the canvas to use this for example also on phones and have the same experience?

Answer 1

You can make a full-screen canvas and use it to display your code.
Here is a boilerplate to get you started:

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);
};