Tengo un lienzo html en el que inserto 5 letras mayúsculas al azar (AZ). Los caracteres tienen tamaños de letra y escala aleatorios. Me gustaría que los personajes se colocaran de izquierda a derecha (en el orden en que fueron creados) en el lienzo sin superponerse y sin salirse de los límites del lienzo (no es necesario que estén centrados en el lienzo). También me gustaría poder rotar los caracteres individuales, lo que no parece funcionar.
Esto es lo que tengo hasta ahora:
window.addEventListener('load', function() { getText(); document.getElementById("reset").addEventListener("click",getText); }); function getText() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); let width = canvas.width; let height = canvas.height; ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, width, height); let text = ""; let x = 20; let y = height / 2; for (var i = 0; i < 5; i++) { text = String.fromCharCode(Math.floor(Math.random() * 26) + 65); let fontSize = Math.floor(Math.random() * 15) + 20; ctx.font = fontSize + "px Comic Sans MS"; ctx.fillStyle = getRandomColor(); let scaleX = Math.floor(Math.random() * 10) / 40 + 0.8; let scaleY = Math.floor(Math.random() * 10) / 40 + 0.8; x = x + (i * width / 5) / (scaleX * 3); y = (height / 2) * (scaleY); ctx.scale(scaleX, scaleY); ctx.fillText(text, x, y); } ctx.restore(); } function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } <canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the canvas element. </canvas> <button id="reset" type="button" name="button">Reset</button>¡Gracias!