-1

I was testing this sample code and I obtained the error

Uncaught TypeError: Cannot set property 'width' of null

where "canvas.width = ...". Could you help me? Here the code:

var canvas = document.getElementById("sim00");
var dim = {
  w: 600,
  h: 480
};
canvas.width = Math.min(dim.w, window.innerWidth - 20);
canvas.height = Math.min(dim.h, window.innerHeight - 20);
canvas {
  border: 1px solid #d3d3d3;
  max-width: 100%;
  height: auto;
}
<canvas id="sim00" width="300" height="300"></canvas>
barbsan
  • 3,418
  • 11
  • 21
  • 28
Albert
  • 11
  • 1
  • 5
  • 2
    Remove the underscore `_` from `getElementById("sim_00")` and it will work. The IDs don't match. By the way, welcome to SO :). – CodeF0x Feb 19 '19 at 11:10
  • You edited the question to fix the typo that caused the problem, and now the problem has gone away. So your question is asking about *working* code. Please just delete the question instead. – Quentin Feb 19 '19 at 11:14
  • Thank you for the typo problem, but the code still not works.. – Albert Feb 19 '19 at 11:18
  • When I click "Run code snippet", the console **does not** display the error *Uncaught TypeError: Cannot set property 'width' of null* – Quentin Feb 19 '19 at 11:19
  • Dear @Quentin, it's true that the console don't show any error, but in my chrome browser it still shows the error in the chrome console. :( – Albert Feb 19 '19 at 11:46
  • You need to provide a [mcve] that actually demonstrates the problem. – Quentin Feb 19 '19 at 11:46
  • Thanks @Quentin. Here the example: [link](https://jsbin.com/mesojijade/edit?html,console,output) – Albert Feb 19 '19 at 12:02
  • @Alberto — You changed the order of your code (even compared to how you had it before it was edited into a snippet here). Duplicate: https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return – Quentin Feb 19 '19 at 13:13

3 Answers3

2

I had the same issue, What worked is that I changed the position of my script tag. Automatically when I generate my HTML skeleton, the script tag appears in the <head>
but after placing it in the <body>, my code worked.

<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>

    <canvas id="canvas" width="1950px" height="800px"></canvas>
    <canvas id="canvasbg" width="1950px" height="800px"></canvas>

</body>

</html>

<html>
<head>

</head>

<body>
    <canvas id="canvas" width="1950px" height="800px"></canvas>
    <canvas id="canvasbg" width="1950px" height="800px"></canvas>

<!-- I omitted some code for simplicity. -->
<!-- Bottom line, Check the placement of your js file. -->
<script type="text/javascript" src="main.js"></script>
</body>

</html>
barbsan
  • 3,418
  • 11
  • 21
  • 28
Doreen Chemweno
  • 303
  • 2
  • 6
-1

You have to use style to change css from js. 

canvas.style.width = Math.min(dim.w, window.innerWidth - 20);
canvas.style.height = Math.min(dim.h, window.innerHeight - 20);
Deepak Adhana
  • 104
  • 1
  • 8
  • 1
    No, the canvas element supports the HTML height and width attributes (and the DOM properties that map on to them). – Quentin Feb 19 '19 at 11:19
  • 1
    If you *were* to switch to using CSS for this, then you would have to follow normal CSS rules and set `width` and `height` to **lengths** not unitless numbers. – Quentin Feb 19 '19 at 11:20
  • Cool , thanks @Quentin for the update. I didn't knew this. – Deepak Adhana Feb 19 '19 at 11:36
-1
<!DOCTYPE html>
<html>

<body>
  <div id="container">
    <canvas id="myCanvas" width=350 height=250>

    </canvas>
  </div>
</body>
</html>

to change the size use

var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;
Basit
  • 862
  • 1
  • 12
  • 30