Recibo este mensaje de error:
"No se pueden leer las propiedades de nulo (leyendo 'getContext')".
¿Por qué?
let canvas = document.getElementById("gameSecreen"); let ctx = canvas.getContext("2d"); ctx.fillRect(20, 20, 100, 100); #gameScreen { border: 1px solid black; } <canvas id="gameScreen" width="800" height="600"> </canvas>El error es bastante autoexplicativo. "No se puede leer la propiedad getContext of null" significa que el objeto en el que está llamando a la función getContext es nulo
let canvas = document.getElementById("gameSecreen"); aquí el lienzo es nulo porque en su HTML la identificación del lienzo es greenScreen pero usó "greenSecreen" dentro de getElementById.
let canvas = document.getElementById("gameScreen"); let ctx = canvas.getContext("2d"); ctx.fillRect(20, 20, 100, 100); #gameScreen { border: 1px solid black; } <canvas id="gameScreen" width="800" height="600"> </canvas>