diff --git a/src/HTMLMesh.js b/src/HTMLMesh.js index 4baffc3..44c48f7 100644 --- a/src/HTMLMesh.js +++ b/src/HTMLMesh.js @@ -190,7 +190,27 @@ function html2canvas( element ) { } - function drawText( style, x, y, string ) { + function getLines( ctx, text, maxWidth ) { + const words = text.split( " " ); + const lines = []; + let currentLine = words[0]; + + for (let i = 1; i < words.length; i++) { + + const word = words[i]; + const width = ctx.measureText( currentLine + " " + word ).width; + if ( width < maxWidth ) { + currentLine += " " + word; + } else { + lines.push( currentLine ); + currentLine = word; + } + } + lines.push(currentLine); + return lines; + } + + function drawText( style, x, y, string, maxWidth ) { if ( string !== '' ) { @@ -203,7 +223,14 @@ function html2canvas( element ) { context.font = style.fontWeight + ' ' + style.fontSize + ' ' + style.fontFamily; context.textBaseline = 'top'; context.fillStyle = style.color; - context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 ); + if ( !maxWidth ) { + context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 ); + } else { + const lines = getLines(context, string, maxWidth); + lines.forEach(function(line, i) { + context.fillText( line, x, y + parseFloat( style.fontSize ) * 0.1 + i * parseFloat( style.fontSize ) * 1.3 ); + }); + } } @@ -259,8 +286,11 @@ function html2canvas( element ) { y = rect.top - offset.top - 0.5; width = rect.width; height = rect.height; + // On Quest the font used to draw on canvas is bigger than on + // the desktop, compensate for this. + const maxWidth = width * 1.01; // 1.005 is good, but use 1.01 to be sure - drawText( style, x, y, element.nodeValue.trim() ); + drawText( style, x, y, element.nodeValue.trim(), maxWidth ); } else if ( element.nodeType === Node.COMMENT_NODE ) {