tag:blogger.com,1999:blog-47149721683077576912012-07-18T21:00:23.178+05:30Mitesh Mehta's BlogMitesh B. Mehtahttp://www.blogger.com/profile/09961356419680542180noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-4714972168307757691.post-78743386294433172792012-07-18T14:16:00.003+05:302012-07-18T14:35:07.539+05:302012-07-18T14:35:07.539+05:30HTML5 - Wrap Text in Canvas<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
It is very important feature that should be included with draft of new features of html5 canvas but unfortunately its not included. I have developed function that makes it possible to wrap text inside the canvas.</div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<br />
Here is the code that will wrap the text on end of the canvas width. It is written in javascript. So to use just add it to your javascript.</div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<br /></div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<b>Parameter Details:</b></div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<br /></div>
<ul style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<li>context = canvas context variable name.</li>
<li>text = Whole text string that to be added in the canvas.</li>
<li>x = starting x point of the text in the canvas.</li>
<li>y = starting y point of the text in the canvas.</li>
<li>maxWidth = canvas's width.</li>
<li>lineHeight = Distance between two lines.</li>
</ul>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
</div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
function wrapText(context, text, x, y, maxWidth, lineHeight) {<br />
var words = text.split(" ");<br />
var line = "";<br />
for(var n = 0; n < words.length; n++) {<br />
var testLine = line + words[n] + " ";<br />
var metrics = context.measureText(testLine);<br />
var testWidth = metrics.width;<br />
if(testWidth > maxWidth) {<br />
context.fillText(line, x, y);<br />
line = words[n] + " ";<br />
y += lineHeight;<br />
}<br />
else {<br />
line = testLine;<br />
}<br />
}<br />
context.fillText(line, x, y);<br />
}</div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<br /></div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
For Ex. </div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
var text = "HTML5 Wrap Text function in Javascript written here is helped me a lot.";<br />
var x = 20;<br />
var y = 20;</div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
wrapText(context, text, x, y, (canvas.width - 8), 25) </div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<br /></div>
<span style="color: red;">*</span> line Height 25 because mine font size is 20.<br />
<br />
<span style="font-family: Georgia,"Times New Roman",serif;">Note : Single canvas for single paragraph</span> <span style="font-family: Georgia,"Times New Roman",serif;">is to be used</span>.<br />
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
<br /></div>
<div style="font-family: Georgia,"Times New Roman",serif; text-align: left;">
Hope this will help you a lot to all HTML5 Developer. Give your comments to improve this article.</div>
</div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/4714972168307757691-7874338629443317279?l=miteshblog.blogspot.com' alt='' /></div>Mitesh B. Mehtahttp://www.blogger.com/profile/09961356419680542180noreply@blogger.com0