crossbrowdy

<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>QuickStart - canvas-text - Quick start guide - An implementation of the HTML5 canvas text drawing methods for older browser - Google Project Hosting </title> <link type="text/css" rel="stylesheet" href="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/core.css"> <link type="text/css" rel="stylesheet" href="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/ph_detail.css"> <link type="application/atom+xml" rel="alternate" href="https://code.google.com/feeds/p/canvas-text/svnchanges/basic?path=/wiki/QuickStart.wiki"> </head> <body class="t6"> <div class="headbg"> <div id="gaia"> <span> <a href="#" id="projects-dropdown" onclick="return false;"><u>My favorites</u> <small>▼</small></a> | <a href="https://www.google.com/accounts/ServiceLogin?service=code&ltmpl=phosting&continue=https%3A%2F%2Fcode.google.com%2Fp%2Fcanvas-text%2Fwiki%2FQuickStart&followup=https%3A%2F%2Fcode.google.com%2Fp%2Fcanvas-text%2Fwiki%2FQuickStart" onclick="_CS_click('/gb/ph/signin');"><u>Sign in</u></a> </span> </div> <div class="gbh" style="left: 0pt;"></div> <div class="gbh" style="right: 0pt;"></div> <div style="height: 1px"></div> <table style="padding:0px; margin: 0px 0px 10px 0px; width:100%" itemscope="" itemtype="http://schema.org/CreativeWork" cellpadding="0" cellspacing="0"> <tbody><tr style="height: 58px;"> <td id="plogo"> <link itemprop="url" href="https://code.google.com/p/canvas-text"> <a href="https://code.google.com/p/canvas-text/"> <img src="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/logo.htm" alt="Logo" itemprop="image"> </a> </td> <td style="padding-left: 0.5em"> <div id="pname"> <a href="https://code.google.com/p/canvas-text/"><span itemprop="name">canvas-text</span></a> </div> <div id="psum"> <a id="project_summary_link" href="https://code.google.com/p/canvas-text/"><span itemprop="description">An implementation of the HTML5 canvas text drawing methods for older browser</span></a> </div> </td> <td style="white-space:nowrap;text-align:right; vertical-align:bottom;"> <form action="/hosting/search"> <input size="30" name="q" type="text"> <input name="projectsearch" value="Search projects" type="submit"> </form> </td></tr> </tbody></table> </div> <div id="mt" class="gtb"> <a href="https://code.google.com/p/canvas-text/" class="tab ">Project Home</a> <a href="https://code.google.com/p/canvas-text/w/list" class="tab active">Wiki</a> <a href="https://code.google.com/p/canvas-text/issues/list" class="tab ">Issues</a> <a href="https://code.google.com/p/canvas-text/source/checkout" class="tab ">Source</a> <div class="gtbc"></div> </div> <table class="st" align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr> <td class="subt"> <div class="issueDetail"> <div class="isf"> <span class="inIssueList"> <span>Search</span> <form action="/p/canvas-text/w/list" method="GET" style="display:inline"> <select id="can" name="can"> <option disabled="disabled">Search within:</option> <option value="1"> All wiki pages</option> <option value="3"> Featured pages</option> <option value="2" selected="selected"> Current pages</option> <option value="4"> Deprecated pages</option> </select> <span>for</span> <span id="qq"><input size="38" id="searchq" name="q" autocomplete="off" type="text"></span> <input value="Search" type="submit"> </form> </span> </div> </div> </td> <td class="bevel-right" align="right" valign="top"></td> </tr> </tbody></table> <script type="text/javascript"> var cancelBubble = false; function _go(url) { document.location = url; } </script> <div id="maincol"> <style type="text/css"> .delcom { background: #e8e8e8 } .commentcontent { margin: 2em; padding: 0px 10px; width: 66em; } .artifactcomment { border-top: 3px solid #c3d9ff; } #commentform { border-top: 3px solid #c3d9ff; } </style> <div id="wikipage"> <table> <tbody><tr> <td style="vertical-align:top; padding-left:5px"> <div id="wikiheader"> <span style="font-size:120%;font-weight:bold">QuickStart</span>   <div> <i>Quick start guide</i> <br> <a class="label" style="padding-top: 2px" href="https://code.google.com/p/canvas-text/w/list?q=label:Featured" title="Listed on project home page">Featured</a>, <a class="label" style="padding-top: 2px" href="https://code.google.com/p/canvas-text/w/list?q=label:Phase-Deploy" title="How to install and configure the program">Phase-Deploy</a> <div id="wikiauthor" style="float:right"> Updated <span title="Thu Feb 4 15:13:08 2010"> Feb 4, 2010</span> by <a class="userlink" href="https://code.google.com/u/phenxdesign/">phenxdesign</a> </div> </div> </div> <div id="wikicontent"> <div class="vt" id="wikimaincol"> <p>This library is intended to be very simple, but you can customize it a little bit if you want so. </p><h2><a name="Include_the_right_files"></a>Include the right files<a href="#Include_the_right_files" class="section_anchor"></a></h2><p>For this library to work the best it can, you'll need 3 files : </p><ul><li>The library itself </li><li>The ExCanvas library if you want it to be available to Internet Explorer 6+ users </li><li>At least one font face file: they contain the font glyphs coordinates. They can be found <a href="http://typeface.neocracy.org/" rel="nofollow">on the typeface.js website</a> or <a href="http://www.madasplayground.com/fonts/" rel="nofollow">here (lots of fonts !)</a>. </li></ul><p></p><pre class="prettyprint"><span class="com"></span><span class="pln"><br></span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"canvas.text.js"</span><span class="tag">></script></span></pre><p>The Canvas text library file <strong>MUST</strong> be named <i>canvas.text.js</i>. In the future, that could be changed, but this is very important as of now. </p><p>The third dependency is related to the font family/weight/style you'll want to use on the canvas element. The font face files can be included the same way the other files are, but need to be after canvas.text.js. </p><p>The needed face files will be downloaded when needed via Ajax and parsed on the fly. For this to work, these files must respect a convention : </p><ul><li>lower case letters </li><li>must respect this format : <tt>family-weight-style.js</tt> where <i>face</i> is the font family, like <i>Arial</i> or <i>Times new roman</i>, <i>weight</i> is the font weight (bold or normal), <i>style</i> is the font style (italic or normal) </li><li>the spaces in the font family name must be replaced by underscores (<tt>_</tt>) </li><li>be placed in the <tt>faces</tt> folder next to the canvas.text.js file. </li></ul><p></p><h2><a name="Options"></a>Options<a href="#Options" class="section_anchor"></a></h2><p>The implementation can be customized thanks to a few options : </p><ul><li>"reimplement": override the built-in text functions by the ones provided by the lib. </li><li>"dontUseMoz": don't use the Mozilla text functions in Firefox 3.0. </li><li>"fallbackCharacter": the character used when a character is not in the font face file. </li><li>"debug": used when debugging, it does nothing for now. </li></ul><p></p><p>These options can be defined by adding HTTP params to the <tt>canvas.text.js</tt> include: </p><pre class="prettyprint"><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"canvas.text.js?reimplement=true&debug=true"</span><span class="tag">></script></span></pre><h2><a name="Use_the_text_functions"></a>Use the text functions<a href="#Use_the_text_functions" class="section_anchor"></a></h2><p>Now the libraries are included, the only thing you have to do is to use the text functions, as they are specified on the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#text" rel="nofollow">WHATWG specification page</a>. </p> </div> </div> </td></tr><tr> </tr></tbody></table> </div> <div id="wikicommentcol"> <div class="collapse"> <div id="commentlist"> <div class="artifactcomment"> <span class="author">Comment by <a class="userlink" href="https://code.google.com/u/109469383085491064308/">ve...@gmx.ch</a>, </span> <span class="date" title="Wed May 13 14:30:58 2009">May 13, 2009</span> <div> <div class="commentcontent"> <p>When including canvas-text.js like described on this page it's loaded even when the browser (firefox 3.5 for example) supports the text functions natively. To work around this problem I embed canvas-text.js like this: </p><pre class="prettyprint"><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln"><br></span><span class="com">/* load canvas.text.js only when needed */</span><span class="pln"><br></span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'canvas'</span><span class="pun">).</span><span class="pln">getContext</span><span class="pun">(</span><span class="str">'2d'</span><span class="pun">).</span><span class="pln">fillText</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br>    document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="str">'<script src="canvas.text.js" type="text/javascript"></s'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">'cript>'</span><span class="pun">);</span><span class="pln"><br></span><span class="pun">}</span><span class="pln"><br></span><span class="tag"></script></span></pre><p>There are probably nicer ways to do this but this one works nicely :) </p> </div> </div> </div> <div class="artifactcomment"> <span class="author">Comment by project member <a class="userlink" href="https://code.google.com/u/fabien.menager/">fabien.menager</a>, </span> <span class="date" title="Fri Jul 24 08:41:48 2009">Jul 24, 2009</span> <div> <div class="commentcontent"> <p>That's a good idea, but as the library itself only is 9kB after being compressed with a minifier like <a href="http://dean.edwards.name/packer/" rel="nofollow">http://dean.edwards.name/packer/</a> I don't think it is a problem to download it, even with a low bandwidth ;) The problem with your code is that we don't know when the library will be loaded, except if you add a onload callback to the script tag. </p> </div> </div> </div> <div class="artifactcomment"> <span class="author">Comment by <a class="userlink" href="https://code.google.com/u/107960582895685569583/">elira...@gmail.com</a>, </span> <span class="date" title="Wed Oct 28 02:53:49 2009">Oct 28, 2009</span> <div> <div class="commentcontent"> <p>how I can insert a whole html page to the canvas, I have to loop on all the html DOM objects and on each element to get it's font attributes or it's innerHTML ? </p> </div> </div> </div> <div class="artifactcomment"> <span class="author">Comment by project member <a class="userlink" href="https://code.google.com/u/fabien.menager/">fabien.menager</a>, </span> <span class="date" title="Wed Oct 28 05:14:05 2009">Oct 28, 2009</span> <div> <div class="commentcontent"> <p>Hello, I think you'd better look at this : <a href="http://ajaxian.com/archives/crazy-times-rendering-html-in-canvas" rel="nofollow">http://ajaxian.com/archives/crazy-times-rendering-html-in-canvas</a> </p> </div> </div> </div> <div class="artifactcomment"> <span class="author">Comment by <a class="userlink" href="https://code.google.com/u/114675902440946413202/">anass.ya...@gmail.com</a>, </span> <span class="date" title="Mon Jan 31 10:35:38 2011">Jan 31, 2011</span> <div> <div class="commentcontent"> <p>brilliant </p> </div> </div> </div> </div> </div> <script type="text/javascript"> function delComment(sequence_num, create_time, delete_mode) { var f = document.forms["delcom"]; f.sequence_num.value = sequence_num; f.create_time.value = create_time; f.mode.value = delete_mode; f.submit(); return false; } </script> </div> <br> <div class="artifactcomment"> <span class="indicator">►</span> <a href="https://www.google.com/accounts/ServiceLogin?service=code&ltmpl=phosting&continue=https%3A%2F%2Fcode.google.com%2Fp%2Fcanvas-text%2Fwiki%2FQuickStart&followup=https%3A%2F%2Fcode.google.com%2Fp%2Fcanvas-text%2Fwiki%2FQuickStart">Sign in</a> to add a comment </div> <form name="delcom" action="../w/delComment.do" method="POST"> <input name="sequence_num" value="" type="hidden"> <input name="create_time" value="" type="hidden"> <input name="mode" value="" type="hidden"> <input name="pagename" value="QuickStart" type="hidden"> <input name="token" value="" type="hidden"> </form> <script src="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/prettify.js"></script> <script type="text/javascript"> prettyPrint(); </script> <script type="text/javascript" src="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/dit_scripts.js"></script> <script type="text/javascript" src="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/ph_core.js"></script> <script type="text/javascript" src="QuickStart%20-%20canvas-text%20-%20Quick%20start%20guide%20-%20An%20implementation%20of%20the%20HTML5%20canvas%20text%20drawing%20methods%20for%20older%20browser%20-%20Google%20Project%20Hosting_files/ph_dwiki.js"></script> </div> <div id="footer" dir="ltr"> <div class="text"> <a href="https://code.google.com/projecthosting/terms.html">Terms</a> - <a href="http://www.google.com/privacy.html">Privacy</a> - <a href="https://code.google.com/p/support/">Project Hosting Help</a> </div> </div> <div class="hostedBy" style="margin-top: -20px;"> <span style="vertical-align: top;">Powered by <a href="http://code.google.com/projecthosting/">Google Project Hosting</a></span> </div> <div style="display: none;" id="menuDiv-projects-dropdown" class="menuDiv instance0"><div class="menuCategory default"></div><div class="menuCategory controls"><a href="http://www.google.com/accounts/ServiceLogin?service=code&ltmpl=phosting&continue=https%3A%2F%2Fcode.google.com%2Fp%2Fcanvas-text%2Fwiki%2FQuickStart&amp;followup=https%3A%2F%2Fcode.google.com%2Fp%2Fcanvas-text%2Fwiki%2FQuickStart" style="display: block;" class="menuItem">Sign in to see your favorites</a><hr class="menuSeparator"><a href="https://code.google.com/hosting/" style="display: block;" class="menuItem">Find open source projects...</a><a href="https://code.google.com/hosting/createProject" style="display: block;" class="menuItem">Create a project...</a></div></div></body></html>