Tengo el siguiente código:
function up(e) { if(e.target.id === 'appCanvas') { // add circle at cursor coords } } canvas { padding: 0; margin: auto; display: block; width: 80%; height: 80%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } <html> <head> <meta charset="utf-8"> <title>Graphs</title> <link rel="stylesheet" href="index.css"> <script type="module" src="application.js"></script> </head> <body> <div> <canvas id="appCanvas" style="border:5px solid #000000;"></canvas> </div> </body> </html>Esto crea un lienzo html ubicado en el centro de la página con un ancho y alto del 80% de la página interior. Sin embargo, en el lado de JavaScript de las cosas, no está agregando un círculo en las coordenadas exactas, sino que se desplaza en un 20% de la altura y el ancho del lienzo.
¿Cómo lo haría exactamente para interactuar solo con el 80% del lienzo y crear círculos exactamente en el lienzo?
utilice un evento de clic en el lienzo. use los métodos clientx y clienty del evento para crear el círculo usando la función de arco y luego muestre el círculo usando la función de trazo/relleno
Lo conseguí de las escuelas w3 https://www.w3schools.com/tags/canvas_arc.asp
Este es un código que escribí
const canvas = document.querySelector("#appCanvas"); canvas.addEventListener("click", circle); function circle(e){ var ctx = canvas.getContext('2d'); ctx.arc(e.clientX,e.clientY,2, 0,2*Math.PI); ctx.stroke(); }