<script> // (B) IMAGES + CANVAS var iBack = new Image(), iMark = "long text", canvas = document.getElementById("demo"), ctx = canvas.getContext("2d"); // (C) WATERMARK function cmark () { // (C1) ADD BACKGROUND IMAGE canvas.width = iBack.naturalWidth; canvas.height = iBack.naturalHeight; ctx.drawImage(iBack, 100, 100, iBack.naturalWidth, iBack.naturalHeight); // (C2) ADD WATERMARK ctx.font = "bold 24px Arial"; ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; ctx.fillText(iMark, 10, 100); ctx.fillText("width:" + ctx.measureText(iMark).width, 100, 50); /* (C3) DOWNLOAD (IF YOU WANT) let anchor = document.createElement("a"); anchor.href = canvas.toDataURL("image/png"); anchor.download = "marked.png"; anchor.click(); anchor.remove();*/ } // (D) GO - PROCEED ONLY WHEN IMAGES ARE LOADED iBack.onload = cmark; iBack.src = "image.jpg"; </script>Cuando escribo texto largo, lo saca de la imagen. No quiero que se derrame fuera de la imagen. ¿Cómo puedo arreglar el texto del lienzo que desborda la imagen? ¿Me puedes ayudar?
Solo puede dibujar una línea de texto a la vez con filltext() , por lo que debe dividir el texto en varias partes cuando es demasiado largo. Puede usar measureText(iMark) para medir la longitud de su texto:
if (measureText(iMark)>100) { let temp1 = iMark.slice(0,iMark.length/2); let temp2 = iMark.slice(iMark.length/2,iMark.length); ctx.fillText(temp1, 10, 100); ctx.fillText(temp1, 10, 200); }