He buscado mucho, pero no puedo resolver este problema que tengo.
Tengo un canvas anidado en un div , con la intención de que el div sirva como fondo para el canvas , de modo que pueda dibujar objetos en él y otras cosas.
Cuando ejecuto mi código, el lienzo aparece al lado del div y no estoy seguro de qué cambiar para solucionarlo.
// html <body> <div id="root"> <div id='board'> <div>test</div> <canvas></canvas> </div> </div> </body> // css #board { position: relative; display: flex; width: 640px; height: 640px; } // js let canvas = document.querySelector('canvas') let ctx = canvas.getContext('2d') canvas.width = canvas.offsetWidth canvas.height = canvas.offsetHeightBusqué preguntas similares aquí con poco éxito. ¡La percepción sería muy apreciada!
Puede agregar este estilo, por ejemplo, para centrar su lienzo y luego agregar más elementos según lo necesite al div de fondo.
canvas { background-color: green; width: 200px; height: 200px; align-self: center; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; }Agregué una imagen del resultado.