Javascript script doesn't load in HTML

Question

<!DOCTYPE html>
<html>
  <head>
    <title>Breakout</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <canvas width="900" height="450" class="canvas"></canvas>

    <script src="scripts/base.js"></script>
  </body>
</html>

This is the index file

*{
  margin: 0;
  padding: 0;
}

.canvas{
  background-color: #b7b7b7;
}

This is the CSS file

var canvas = document.getElementsByClassName('canvas');
var context = canvas.getContext('2d');

context.beginPath();

context.drawRect(20,30,50,40);
context.fillStyle("#0022ff");
context.fill();

context.endPath();

And the javascript file. I am trying to create a breakout game and I am following a tutorial from udemy. Unfortunately, it seems there is something wrong with this code, but I don't know what. I verified the code one thousand times and I haven't found anything.

@hungerstar +1, but don't forget to mention: In case of multiple .canvas it's better to use querySelectorAll — user6247920
– user6247920, Commented Jun 8, 2017 at 20:25
True, with querySelectorAll() you get a NodeList and need to use canvas[ 0 ] again. — hungerstar
– hungerstar, Commented Jun 8, 2017 at 20:30

Lieutenant Dan · Accepted Answer · 2017-06-08 20:20:35Z

2

That's because in your var canvas, you're calling document.getElementByClassName which will return an "array-like" object. So, I'd suggest you to use IDs instead of selecting using a class.

edited Jun 8, 2017 at 20:20

Lieutenant Dan

8,30928 gold badges99 silver badges220 bronze badges

answered Jun 8, 2017 at 20:19

user4406073

Sign up to request clarification or add additional context in comments.

1 Comment

hungerstar Over a year ago

Nothing wrong with selecting by class name, just depends on the method used. getElementByClassName() returns an array-like object as you said, querySelector() will return the first element with the specified selector, in this case, .canvas. But yeah, if you want to target a single element and don't want to take chances, then an ID is a great choice.

TedMeftah · Accepted Answer · 2017-06-08 20:30:18Z

var context = canvas.getContext('2d'); should be var context = canvas[0].getContext('2d'); because you're using document.getElementsByClassName which will return a collection of all the elements with that class name. and you want the context of the first one.
context.drawRect should be context.rect.
context.fillStyle is not a function it should be context.fillStyle = "#0022ff";
context.endPath(); should be context.closePath();
In your case you don't need context.beginPath(); and context.closePath();. context.rect already creates the path.

var canvas = document.getElementsByClassName('canvas');
var context = canvas[0].getContext('2d');


context.rect(20, 30, 50, 40);
context.fillStyle = "#0022ff";
context.fill();

* {
  margin: 0;
  padding: 0;
}

.canvas {
  background-color: #b7b7b7;
}

<canvas width="900" height="450" class="canvas"></canvas>

Thank you. I realised that i used the fillStyle as a method. That was the problem

mantequilla · Accepted Answer · 2017-06-08 20:31:57Z

0

Use fillRect instead of drawRect:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.fillRect(20,30,50,40);
ctx.endPath();


</script>

answered Jun 8, 2017 at 20:31

mantequilla

316 bronze badges

Collectives™ on Stack Overflow

Javascript script doesn't load in HTML

3 Answers 3

1 Comment

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Related