What is the best way to scale an Canvas with css or js to the screen? And how do I make the width of the canvas equal to the height?

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