|
<!DOCTYPE HTML>
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
#myCanvas
{
border: 1px solid #9C9898;
}
</style>
<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)
{
context.fillText(line, x, y);
line = words[n] + " ";
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
window.onload = function ()
{
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var maxWidth = 300;
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. ";
context.font = "16pt Calibri";
context.fillStyle = "#333";
wrapText(context, text, x, y, maxWidth, lineHeight);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="170"></canvas>
</body>
</html>
|