Tengo un lienzo con ID foobar . Ya lo he atraído.
let canvas = document.getElementById("foobar"); Necesito rotar este lienzo 90°. Rotar #foobar con CSS no funciona:
#foobar { /* When I click somewhere on the canvas, it registers the position of the click as what the position would be pre-rotation rather than post-rotation. */ transform: rotate(90deg); }Además, rotar el contexto solo funciona cuando aún no se ha dibujado un elemento, por lo que esto tampoco funcionará:
let context = canvas.getContext("2d"); context.rotate(90 * (Math.PI / 180));Cuando registre clics, intente usar event.offsetX y event.offsetY . Estos deben alinearse correctamente con las coordenadas del lienzo. Por ejemplo:
<canvas> </canvas> <style> canvas { transform: rotate(90deg); /* just so the canvas is visible */ border-color: black; border-style: solid; } </style> <script> // when canvas is clicked, draw a dot const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); canvas.addEventListener('click', (e) => { const x = e.offsetX; const y = e.offsetY ctx.beginPath(); ctx.arc(x, y, 10, 0, 2 * Math.PI); ctx.fillStyle = 'red'; ctx.fill(); }); </script>