Estoy tratando de dibujar un círculo usando la etiqueta de lienzo usando javascript, pero constantemente recibo un error que indica que c is null cuando uso document.getElementById() . Inicialmente supuse que esto se debía a que el contenido HTML no se cargaba lo suficientemente rápido, así que usé window.onload pero esto no cambió nada. Cualquier ayuda sería apreciada:
HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/stylesheet.css" /> <link rel="icon" href="images/favicon.png" /> <script src="javascript/script.js"></script> </head> <body> <canvas id="myLogo" width="150" height="150"></canvas> </body> </html>JavaScript:
window.onload = scripting(); function scripting() { logo(); function logo() { console.log('called logo()'); var c = document.getElementById("myLogo"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); } } El código anterior da como resultado el siguiente error, que hace referencia a las líneas 12:13 :
¿Ha intentado mover su bloque <script> a la parte inferior de (último elemento en) <body> ?