Search code examples
javascripthtmlgraphicshtml5-canvas

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

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