Estoy tratando de dibujar un rectángulo cuando el usuario presiona un botón en Javascript. Si el código en el script no está en una función, dibuja el rectángulo pero, por supuesto, no responde al botón. Si lo pongo en una función llamada por el botón, no pasa nada ya sea en la cabeza o en el cuerpo. ¿Cómo puedo dibujar el rectángulo presionando el botón?
¡Muchas gracias de antemano!
<html> <head> <title>Test 4</title> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <canvas id="myCanvas" width="400" height="600"> <p>Fallback content for browsers that don't support the canvas tag.</p> </canvas> <script> function myFunction() { const canvas = document.querySelector('.myCanvas'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.fillRect(50, 50, 100, 150); } </script> <p> Click the button <button onclick="myFunction()">Try it</button> </p> </body> </html>Cambie su selector de consultas a #myCanvas .
Un prefijo de . indica que debe encontrar un elemento con una clase de myCanvas , para buscar en su lugar una identificación de elemento, use el prefijo # .