Estaba en medio de hacer uno del proyecto Etcha-sketch y no puedo entender por qué canvas es nulo, tampoco entiendo bien el concepto de nulo e indefinido y si alguien pudiera explicarme qué es y porque en mi contexto es asi se los agradeceria.
Aquí está el 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 }Si hay alguna necesidad de aclaraciones adicionales a mi problema, por favor dígamelo.