Created
October 29, 2014 02:41
-
-
Save JimmyJune/5ecf400fc69fa37255c6 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="myCanvas" width="578" height="200"></canvas> | |
| <script> | |
| function wrapText(context, text, x, y, maxWidth, lineHeight) { | |
| var words = text.split(' '); | |
| var line = ''; | |
| for(var n = 0; n < words.length; n++) { | |
| var testLine = line + words[n] + ' '; | |
| var metrics = context.measureText(testLine); | |
| var testWidth = metrics.width; | |
| if (testWidth > maxWidth && n > 0) { | |
| context.fillText(line, x, y); | |
| line = words[n] + ' '; | |
| y += lineHeight; | |
| } | |
| else { | |
| line = testLine; | |
| } | |
| } | |
| context.fillText(line, x, y); | |
| } | |
| var canvas = document.getElementById('myCanvas'); | |
| var context = canvas.getContext('2d'); | |
| var maxWidth = 400; | |
| var lineHeight = 25; | |
| var x = (canvas.width - maxWidth) / 2; | |
| var y = 60; | |
| var text = 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.'; | |
| context.font = '16pt Calibri'; | |
| context.fillStyle = '#333'; | |
| wrapText(context, text, x, y, maxWidth, lineHeight); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment