CODEWITHSUNDEEP
javascripthtmlgraphicshtml5-canvas
Elsa
Elsa

Reputation: 45

HTML Canvas Won't Draw

I'm trying to learn the HTML canvas, but nothing is drawing on my canvas element. What would be the best way to proceed from here? (complete canvas beginner)

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="main.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" class="center"></canvas>
  </body>
</html>

JavaScript

let cx = document.querySelector("myCanvas").getContext("2d");

window.onload = function drawOnCanvas() {
  cx.beginPath();
  cx.moveTo(50, 10);
  cx.lineTo(10, 70);
  cx.lineTo(90, 70);
  cx.fill();
};

Upvotes: 0

Views: 43

Answers (1)

J.Porter
J.Porter

Reputation: 291

myCanvas is id of element. document.querySelector expects a css selector. So if you want to select element with id, you have to use prefix #

-javascript

let cx = document.querySelector("#myCanvas").getContext("2d");

Upvotes: 0

Related Questions