why is the canvas null?(etc-a-sketch problem)

Question

I was in the middle of making one of the Etcha-sketch project and I cannot get my head a round why canvas is null, I also don`t grasp well the concept of null and undefined and if someone could explain to me what it is and why in my context is like that I would appreciate it.

Here is the HTML

<!DOCTYPE html>

<head>
    <title>Etch-a-sketch</title>
    <link rel="stylesheet" href="Etch-a-sketch/Etch-a-sketch.css">
    <script src='Etch-a-sketch/Etch-a-sketch.js'></script>

</head>
<body>

    <div class="canvasWrap">
        <canvas width="1600" height="1000" id="etch-a-sketch">

        </canvas>
        <div class="buttons">
            <button class="shake">Shake!</button>
        </div>
    </div>
</body>
</html>

CSS:

body {
    min-height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    background: white;
    background: url(https://s3.amazonaws.com/media.locally.net/original/HABA_ALT_2017-08-02-13-22-45.jpg);
    background-size: cover;
}

canvas {
    border: 30px solid #e80000;
    border-radius: 10px;
    width: 800px;
    height: 500px;
    background: white;
}
canvas.shake {
    animation: shake 0.5s linear 1;
  }

JavaScript:

const canvas = document.querySelector('#etch-a-sketch');
const ctx = canvas.getContext('2d');
const shakeButton = document.querySelector('.shake');

ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.lineWidth = 10;

//starts drawing 
function beginPath(ctx){

    ctx.moveTo(200,200)
    ctx.stroke();// will draw a line from where it started to where you are 
}

If there s any need to further clarifications to my issue please tell me so.

why is the canvas null?(etc-a-sketch problem)

0 Answers0