Tengo problemas para usar el elemento Canvas en todos mis navegadores. La consola web dice un "error de secuencia de comandos", pero estoy usando el mismo método que usé en otros proyectos que funcionó muy bien, mi código es el siguiente:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="script.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html>Y el archivo javascript:
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);*Mis navegadores admiten el elemento Canvas
*La línea del javascript que contiene el "const ctx" está señalada con error por mi consola web, ¿qué hice?
El problema es que el archivo JS se carga antes que el lienzo. Para solucionar esto, mueva la etiqueta del script al cuerpo:
<body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body>Alternativamente, si desea mantener la etiqueta del script en el encabezado, mueva el código del lienzo a window.onload:
window.onload = function() { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100); }