Estoy tratando de implementar la etiqueta de lienzo HTML en Visual Studio Code, pero no funciona.
Aquí está mi código:
<!DOCTYPE html> <html> <head> <title>Test</title> <script src="jspsych-6.3.1\jspsych.js"></script> <script src="jspsych-6.3.1\plugins\jspsych-html-button-response.js"></script> <link href="jspsych-6.3.1\css\jspsych.css" rel="stylesheet" type="text/css"/> </head> <body> <canvas id="myCanvas" width="200" height="100"></canvas> <script> var finalTimeline = []; var example = { type: 'html-button-response', stimulus: function() { var c = document.getElementById("myCanvas"); var ctx= c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); } }; finalTimeline.push(example); jsPsych.init({ timeline: finalTimeline }); </script> </body> </html>Cuando intento ejecutar el código, recibo el siguiente mensaje en la consola de mi depurador: "Error de tipo no detectado: no se pueden leer las propiedades de nulo (leyendo 'getContext')".
Sé que otras personas en este sitio web se han encontrado con el mismo problema, pero después de revisar algunos de sus hilos, parece que su problema era que no habían agregado el elemento canvas a su DOM, es decir, no habían colocado el elemento dentro las etiquetas del cuerpo. Sin embargo, mi elemento de lienzo está dentro de las etiquetas del cuerpo, por lo que no estoy seguro de por qué mi computadora no lo reconoce.
¿Alguien ha encontrado este problema antes? Si es así, ¿podría compartir sus pensamientos sobre cómo resolverlo?
Editar: el problema parece estar relacionado con el hecho de que el elemento canvas se llama dentro de una función jsPsych. Cuando implemento el código usando JavaScript normal, funciona bien.