Solution 1 :

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


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


* {
  margin: 0;

canvas {
  display: block;


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

Problem :

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?


Comment posted by clota974

Unfortunately, it looks like you are looking for a tutorial rather than a solution to a problem.

Comment posted by Eden Sharvit

Great! If it’ll work for you, don’t forget to mark the answer as useful, and in case it will not specify what you need so we can help you more 🙂