Tengo un rectángulo y una estrella que he dibujado en un lienzo html5. Quería darle a cada elemento una clase. ¿Cómo se puede hacer eso?
Yo he tratado
ctx.classList.add('caja'); ctx.classList.add('Estrella');
Y parece que ese no es el enfoque correcto.
Me pregunto si hay una manera de simplemente poner un nombre de clase.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>boxstar</title> <script> function init() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); draw(ctx); } function draw(ctx) { ctx.save(); ctx.beginPath(); ctx.moveTo(477.6, 312.2); ctx.lineTo(49.8, 312.2); ctx.lineTo(49.8, 0.0); ctx.lineTo(477.6, 0.0); ctx.lineTo(477.6, 312.2); ctx.closePath(); ctx.fillStyle = "rgb(248, 15, 15)"; ctx.fill(); ctx.beginPath(); ctx.moveTo(448.9, 997.8); ctx.lineTo(277.4, 907.7); ctx.lineTo(106.0, 997.8); ctx.lineTo(138.7, 806.9); ctx.lineTo(0.0, 671.7); ctx.lineTo(191.7, 643.8); ctx.lineTo(277.4, 470.1); ctx.lineTo(363.2, 643.8); ctx.lineTo(554.9, 671.7); ctx.lineTo(416.2, 806.9); ctx.lineTo(448.9, 997.8); ctx.closePath(); ctx.fill(); ctx.restore(); } </script> </head> <body onload="init()"> <canvas id="canvas" width="555" height="998"></canvas> </body> </html>Gracias de antemano por tu tiempo !