What about text In Google Canvas....How to add Roted text in Canvas?

518 views

Skip to first unread message

Somnath

unread,

Jul 10, 2007, 3:07:46 AM7/10/07

to google-excanvas

Im very new with google canvas...
Im able to draw all basic elements for a graph but...

What about text In Google Canvas....How to add Roted text in Canvas?

Ryan Schmidt

unread,

Jul 10, 2007, 3:51:01 AM7/10/07

to google-...@googlegroups.com

The canvas element does not support any kind of text. This is not
just the excanvas compatibility layer for IE; in all browsers, there
is no text support in a canvas.

Klaus Reimer

unread,

Jul 10, 2007, 4:13:46 AM7/10/07

to google-...@googlegroups.com

Unfortunately there is no native support for text in the canvas spec.
I'm pretty sure VML has text support (like SVG) but excanvas is a IE
compatibility layer for the canvas so there is no point in supporting
text when the real canvas doesn't support it.

But maybe this article is interesting for you:

http://canvaspaint.org/blog/2006/12/rendering-text/

It describes some possibilities of using text in a canvas. All these
methods should work with excanvas because they are simply based on
images or simple lines.

--
Bye, K <http://www.ailis.de/~k/>
[A735 47EC D87B 1F15 C1E9 53D3 AA03 6173 A723 E391]
(Finger k...@ailis.de to get public key)

picpr...@googlemail.com

unread,

Aug 7, 2007, 7:12:39 AM8/7/07

to google-excanvas

I have tried glyph-based font-rendering. But it is to slow for my use.

Maybe someone finds a solution to quicken it for IE, or maybe it will
help someone.

== FontRender.js ==

var size = 24;
var pos = {x:30,y:10+size};
var max_width = 0

window.onload = function() {

var console=document.getElementById('console');
var ctx = document.getElementById('c').getContext('2d');
max_width = document.getElementById('c').getAttribute('width');

// uncomment for full Font-Overview
// setTimeout("renderWebdings()",0);
// setTimeout("renderWingdings()",0);
// setTimeout("renderArial()",0);

document.onkeypress = keypressed;

}

function renderArial() {
var ctx = document.getElementById('c').getContext('2d');
var text = "\u0009\u000a\u000d
\u0020\u0021\u0022\u0023\u0024\u0025\u0026\u0027\u0028\u0029\u002a
\u002b\u002c\u002d\u002e\u002f
\u0030\u0031\u0032\u0033\u0034\u0035\u0036\u0037\u0038\u0039\u003a
\u003b\u003c\u003d\u003e\u003f
\u0040\u0041\u0042\u0043\u0044\u0045\u0046\u0047\u0048\u0049\u004a
\u004b\u004c\u004d\u004e\u004f
\u0050\u0051\u0052\u0053\u0054\u0055\u0056\u0057\u0058\u0059\u005a
\u005b\u005c\u005d\u005e\u005f
\u0060\u0061\u0062\u0063\u0064\u0065\u0066\u0067\u0068\u0069\u006a
\u006b\u006c\u006d\u006e\u006f
\u0070\u0071\u0072\u0073\u0074\u0075\u0076\u0077\u0078\u0079\u007a
\u007b\u007c\u007d\u007e
\u00a0\u00a1\u00a2\u00a3\u00a4\u00a5\u00a6\u00a7\u00a8\u00a9\u00aa
\u00ab\u00ac\u00ad\u00ae\u00af
\u00b0\u00b1\u00b2\u00b3\u00b4\u00b5\u00b6\u00b7\u00b8\u00b9\u00ba
\u00bb\u00bc\u00bd\u00be\u00bf
\u00c0\u00c1\u00c2\u00c3\u00c4\u00c5\u00c6\u00c7\u00c8\u00c9\u00ca
\u00cb\u00cc\u00cd\u00ce\u00cf
\u00d0\u00d1\u00d2\u00d3\u00d4\u00d5\u00d6\u00d7\u00d8\u00d9\u00da
\u00db\u00dc\u00dd\u00de\u00df
\u00e0\u00e1\u00e2\u00e3\u00e4\u00e5\u00e6\u00e7\u00e8\u00e9\u00ea
\u00eb\u00ec\u00ed\u00ee\u00ef
\u00f0\u00f1\u00f2\u00f3\u00f4\u00f5\u00f6\u00f7\u00f8\u00f9\u00fa
\u00fb\u00fc\u00fd\u00fe\u00ff
\u0100\u0101\u0102\u0103\u0104\u0105\u0106\u0107\u0108\u0109\u010a
\u010b\u010c\u010d\u010e\u010f
\u0110\u0111\u0112\u0113\u0114\u0115\u0116\u0117\u0118\u0119\u011a
\u011b\u011c\u011d\u011e\u011f
\u0120\u0121\u0122\u0123\u0124\u0125\u0126\u0127\u0128\u0129\u012a
\u012b\u012c\u012d\u012e\u012f
\u0130\u0131\u0132\u0133\u0134\u0135\u0136\u0137\u0138\u0139\u013a
\u013b\u013c\u013d\u013e\u013f
\u0140\u0141\u0142\u0143\u0144\u0145\u0146\u0147\u0148\u0149\u014a
\u014b\u014c\u014d\u014e\u014f
\u0150\u0151\u0152\u0153\u0154\u0155\u0156\u0157\u0158\u0159\u015a
\u015b\u015c\u015d\u015e\u015f
\u0160\u0161\u0162\u0163\u0164\u0165\u0166\u0167\u0168\u0169\u016a
\u016b\u016c\u016d\u016e\u016f
\u0170\u0171\u0172\u0173\u0174\u0175\u0176\u0177\u0178\u0179\u017a
\u017b\u017c\u017d\u017e\u017f\u018f\u0192\u01a0\u01a1\u01af
\u01b0\u01cd\u01ce\u01cf
\u01d0\u01d1\u01d2\u01d3\u01d4\u01d5\u01d6\u01d7\u01d8\u01d9\u01da
\u01db\u01dc\u01fa\u01fb\u01fc\u01fd\u01fe\u01ff
\u0259\u02c6\u02c7\u02c9\u02d8\u02d9\u02da\u02db\u02dc\u02dd
\u0300\u0301\u0303\u0309\u0323\u037e
\u0384\u0385\u0386\u0387\u0388\u0389\u038a\u038c\u038e\u038f
\u0390\u0391\u0392\u0393\u0394\u0395\u0396\u0397\u0398\u0399\u039a
\u039b\u039c\u039d\u039e\u039f
\u03a0\u03a1\u03a3\u03a4\u03a5\u03a6\u03a7\u03a8\u03a9\u03aa\u03ab
\u03ac\u03ad\u03ae\u03af
\u03b0\u03b1\u03b2\u03b3\u03b4\u03b5\u03b6\u03b7\u03b8\u03b9\u03ba
\u03bb\u03bc\u03bd\u03be\u03bf
\u03c0\u03c1\u03c2\u03c3\u03c4\u03c5\u03c6\u03c7\u03c8\u03c9\u03ca
\u03cb\u03cc\u03cd\u03ce
\u0401\u0402\u0403\u0404\u0405\u0406\u0407\u0408\u0409\u040a\u040b
\u040c\u040e\u040f
\u0410\u0411\u0412\u0413\u0414\u0415\u0416\u0417\u0418\u0419\u041a
\u041b\u041c\u041d\u041e\u041f
\u0420\u0421\u0422\u0423\u0424\u0425\u0426\u0427\u0428\u0429\u042a
\u042b\u042c\u042d\u042e\u042f
\u0430\u0431\u0432\u0433\u0434\u0435\u0436\u0437\u0438\u0439\u043a
\u043b\u043c\u043d\u043e\u043f
\u0440\u0441\u0442\u0443\u0444\u0445\u0446\u0447\u0448\u0449\u044a
\u044b\u044c\u044d\u044e\u044f
\u0451\u0452\u0453\u0454\u0455\u0456\u0457\u0458\u0459\u045a\u045b
\u045c\u045e\u045f\u0490\u0491\u0492\u0493\u0496\u0497\u049a\u049b
\u049c\u049d\u04a2\u04a3\u04ae\u04af
\u04b0\u04b1\u04b2\u04b3\u04b8\u04b9\u04ba\u04bb
\u04d8\u04d9\u04e8\u04e9\u05b0\u05b1\u05b2\u05b3\u05b4\u05b5\u05b6\u05b7\u05b8\u05b9\u05ba
\u05bb\u05bc\u05bd\u05be\u05bf
\u05c0\u05c1\u05c2\u05c3\u05d0\u05d1\u05d2\u05d3\u05d4\u05d5\u05d6\u05d7\u05d8\u05d9\u05da
\u05db\u05dc\u05dd\u05de\u05df
\u05e0\u05e1\u05e2\u05e3\u05e4\u05e5\u05e6\u05e7\u05e8\u05e9\u05ea
\u05f0\u05f1\u05f2\u05f3\u05f4\u060c\u061b\u061f
\u0621\u0622\u0623\u0624\u0625\u0626\u0627\u0628\u0629\u062a\u062b
\u062c\u062d\u062e\u062f
\u0630\u0631\u0632\u0633\u0634\u0635\u0636\u0637\u0638\u0639\u063a
\u0640\u0641\u0642\u0643\u0644\u0645\u0646\u0647\u0648\u0649\u064a
\u064b\u064c\u064d\u064e\u064f
\u0650\u0651\u0652\u0653\u0654\u0655\u0660\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669\u066a
\u066b\u066c\u066d\u066e\u066f
\u0670\u0671\u0672\u0673\u0674\u0675\u0676\u0677\u0678\u0679\u067a
\u067b\u067c\u067d\u067e\u067f
\u0680\u0681\u0682\u0683\u0684\u0685\u0686\u0687\u0688\u0689\u068a
\u068b\u068c\u068d\u068e\u068f
\u0690\u0691\u0692\u0693\u0694\u0695\u0696\u0697\u0698\u0699\u069a
\u069b\u069c\u069d\u069e\u069f
\u06a0\u06a1\u06a2\u06a3\u06a4\u06a5\u06a6\u06a7\u06a8\u06a9\u06aa
\u06ab\u06ac\u06ad\u06ae\u06af
\u06b0\u06b1\u06b2\u06b3\u06b4\u06b5\u06b6\u06b7\u06b8\u06b9\u06ba
\u06bb\u06bc\u06bd\u06be\u06bf
\u06c0\u06c1\u06c2\u06c3\u06c4\u06c5\u06c6\u06c7\u06c8\u06c9\u06ca
\u06cb\u06cc\u06cd\u06ce\u06cf
\u06d0\u06d1\u06d2\u06d3\u06d4\u06d5\u06d6\u06d7\u06d8\u06d9\u06da
\u06db\u06dc\u06dd\u06de\u06df
\u06e0\u06e1\u06e2\u06e3\u06e4\u06e5\u06e6\u06e7\u06e8\u06e9\u06ea
\u06eb\u06ec\u06ed
\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\u06fa
\u06fb\u06fc\u06fd\u06fe
\u1e80\u1e81\u1e82\u1e83\u1e84\u1e85\u1ea0\u1ea1\u1ea2\u1ea3\u1ea4\u1ea5\u1ea6\u1ea7\u1ea8\u1ea9\u1eaa
\u1eab\u1eac\u1ead\u1eae\u1eaf
\u1eb0\u1eb1\u1eb2\u1eb3\u1eb4\u1eb5\u1eb6\u1eb7\u1eb8\u1eb9\u1eba
\u1ebb\u1ebc\u1ebd\u1ebe\u1ebf
\u1ec0\u1ec1\u1ec2\u1ec3\u1ec4\u1ec5\u1ec6\u1ec7\u1ec8\u1ec9\u1eca
\u1ecb\u1ecc\u1ecd\u1ece\u1ecf
\u1ed0\u1ed1\u1ed2\u1ed3\u1ed4\u1ed5\u1ed6\u1ed7\u1ed8\u1ed9\u1eda
\u1edb\u1edc\u1edd\u1ede\u1edf
\u1ee0\u1ee1\u1ee2\u1ee3\u1ee4\u1ee5\u1ee6\u1ee7\u1ee8\u1ee9\u1eea
\u1eeb\u1eec\u1eed\u1eee\u1eef
\u1ef0\u1ef1\u1ef2\u1ef3\u1ef4\u1ef5\u1ef6\u1ef7\u1ef8\u1ef9\u200c
\u200d\u200e\u200f\u2013\u2014\u2015\u2017\u2018\u2019\u201a\u201b
\u201c\u201d\u201e\u2020\u2021\u2022\u2026\u2028\u2029\u202a\u202b
\u202c\u202d\u202e\u2030\u2032\u2033\u2039\u203a\u203c\u203e
\u2044\u206a\u206b\u206c\u206d\u206e\u206f\u207f
\u20a3\u20a4\u20a7\u20aa\u20ab\u20ac
\u2105\u2113\u2116\u2122\u2126\u212e\u2153\u2154\u215b\u215c\u215d
\u215e\u2190\u2191\u2192\u2193\u2194\u2195\u21a8\u2202\u2206\u220f
\u2211\u2212\u2215\u2219\u221a\u221e\u221f\u2229\u222b
\u2248\u2260\u2261\u2264\u2265\u2302\u2310\u2320\u2321\u2500\u2502\u250c
\u2510\u2514\u2518\u251c\u2524\u252c\u2534\u253c
\u2550\u2551\u2552\u2553\u2554\u2555\u2556\u2557\u2558\u2559\u255a
\u255b\u255c\u255d\u255e\u255f
\u2560\u2561\u2562\u2563\u2564\u2565\u2566\u2567\u2568\u2569\u256a
\u256b\u256c\u2580\u2584\u2588\u258c
\u2590\u2591\u2592\u2593\u25a0\u25a1\u25aa\u25ab\u25ac\u25b2\u25ba
\u25bc\u25c4\u25ca\u25cb\u25cf\u25d8\u25d9\u25e6\u263a\u263b\u263c
\u2640\u2642\u2660\u2663\u2665\u2666\u266a\u266b
\ue801\ue802\ue803\ue804\ue805\ue818\ue83a
\uf001\uf002\uf004\uf005\uf006\uf007\uf008\uf009\uf00a\uf00b\uf00c
\uf00d\uf00e\uf00f
\uf010\uf011\uf012\uf013\uf014\uf015\uf016\uf017\uf018\uf019\uf01a
\uf01b\uf01c\uf01d\uf01e\uf01f
\uf020\uf021\uf022\uf023\uf024\uf025\uf026\uf027\uf028\uf029\uf02a
\uf02b\uf02c\uf02d\uf02e\uf02f\uf030\uf031\ufb01\ufb02\ufb1d\ufb1e
\ufb1f\ufb20\ufb2a\ufb2b\ufb2c\ufb2d\ufb2e\ufb2f
\ufb30\ufb31\ufb32\ufb33\ufb34\ufb35\ufb36\ufb38\ufb39\ufb3a\ufb3b
\ufb3c\ufb3e\ufb40\ufb41\ufb43\ufb44\ufb46\ufb47\ufb48\ufb49\ufb4a
\ufb4b\ufb4c\ufb4d\ufb4e\ufb4f
\ufb50\ufb51\ufb52\ufb53\ufb54\ufb55\ufb56\ufb57\ufb58\ufb59\ufb5a
\ufb5b\ufb5c\ufb5d\ufb5e\ufb5f
\ufb60\ufb61\ufb62\ufb63\ufb64\ufb65\ufb66\ufb67\ufb68\ufb69\ufb6a
\ufb6b\ufb6c\ufb6d\ufb6e\ufb6f
\ufb70\ufb71\ufb72\ufb73\ufb74\ufb75\ufb76\ufb77\ufb78\ufb79\ufb7a
\ufb7b\ufb7c\ufb7d\ufb7e\ufb7f
\ufb80\ufb81\ufb82\ufb83\ufb84\ufb85\ufb86\ufb87\ufb88\ufb89\ufb8a
\ufb8b\ufb8c\ufb8d\ufb8e\ufb8f
\ufb90\ufb91\ufb92\ufb93\ufb94\ufb95\ufb96\ufb97\ufb98\ufb99\ufb9a
\ufb9b\ufb9c\ufb9d\ufb9e\ufb9f
\ufba0\ufba1\ufba2\ufba3\ufba4\ufba5\ufba6\ufba7\ufba8\ufba9\ufbaa
\ufbab\ufbac\ufbad\ufbae\ufbaf
\ufbb0\ufbb1\ufbd3\ufbd4\ufbd5\ufbd6\ufbd7\ufbd8\ufbd9\ufbda\ufbdb
\ufbdc\ufbdd\ufbde\ufbdf
\ufbe0\ufbe1\ufbe2\ufbe3\ufbe4\ufbe5\ufbe6\ufbe7\ufbfc\ufbfd\ufbfe
\ufbff\ufc5e\ufc5f\ufc60\ufc61\ufc62\ufd3e\ufd3f
\ufdf2\ufe80\ufe81\ufe82\ufe83\ufe84\ufe85\ufe86\ufe87\ufe88\ufe89\ufe8a
\ufe8b\ufe8c\ufe8d\ufe8e\ufe8f
\ufe90\ufe91\ufe92\ufe93\ufe94\ufe95\ufe96\ufe97\ufe98\ufe99\ufe9a
\ufe9b\ufe9c\ufe9d\ufe9e\ufe9f
\ufea0\ufea1\ufea2\ufea3\ufea4\ufea5\ufea6\ufea7\ufea8\ufea9\ufeaa
\ufeab\ufeac\ufead\ufeae\ufeaf
\ufeb0\ufeb1\ufeb2\ufeb3\ufeb4\ufeb5\ufeb6\ufeb7\ufeb8\ufeb9\ufeba
\ufebb\ufebc\ufebd\ufebe\ufebf
\ufec0\ufec1\ufec2\ufec3\ufec4\ufec5\ufec6\ufec7\ufec8\ufec9\ufeca
\ufecb\ufecc\ufecd\ufece\ufecf
\ufed0\ufed1\ufed2\ufed3\ufed4\ufed5\ufed6\ufed7\ufed8\ufed9\ufeda
\ufedb\ufedc\ufedd\ufede\ufedf
\ufee0\ufee1\ufee2\ufee3\ufee4\ufee5\ufee6\ufee7\ufee8\ufee9\ufeea
\ufeeb\ufeec\ufeed\ufeee\ufeef
\ufef0\ufef1\ufef2\ufef3\ufef4\ufef5\ufef6\ufef7\ufef8\ufef9\ufefa
\ufefb\ufefc\ufffc";
pos = renderParagraph(ctx,FontRepository.Arial,"Arial",pos);
pos = renderText(ctx,FontRepository.Arial,text,pos);
}

function renderWingdings() {
var ctx = document.getElementById('c').getContext('2d');
var text = "\u0009\u000a\u000d\u200c\u200d\u200e\u200f
\u2028\u2029\u202a\u202b\u202c\u202d\u202e\u206a\u206b\u206c\u206d
\u206e\u206f
\uf020\uf021\uf022\uf023\uf024\uf025\uf026\uf027\uf028\uf029\uf02a
\uf02b\uf02c\uf02d\uf02e\uf02f
\uf030\uf031\uf032\uf033\uf034\uf035\uf036\uf037\uf038\uf039\uf03a
\uf03b\uf03c\uf03d\uf03e\uf03f
\uf040\uf041\uf042\uf043\uf044\uf045\uf046\uf047\uf048\uf049\uf04a
\uf04b\uf04c\uf04d\uf04e\uf04f
\uf050\uf051\uf052\uf053\uf054\uf055\uf056\uf057\uf058\uf059\uf05a
\uf05b\uf05c\uf05d\uf05e\uf05f
\uf060\uf061\uf062\uf063\uf064\uf065\uf066\uf067\uf068\uf069\uf06a
\uf06b\uf06c\uf06d\uf06e\uf06f
\uf070\uf071\uf072\uf073\uf074\uf075\uf076\uf077\uf078\uf079\uf07a
\uf07b\uf07c\uf07d\uf07e
\uf080\uf081\uf082\uf083\uf084\uf085\uf086\uf087\uf088\uf089\uf08a
\uf08b\uf08c\uf08d\uf08e\uf08f
\uf090\uf091\uf092\uf093\uf094\uf095\uf096\uf097\uf098\uf099\uf09a
\uf09b\uf09c\uf09d\uf09e\uf09f
\uf0a0\uf0a1\uf0a2\uf0a3\uf0a4\uf0a5\uf0a6\uf0a7\uf0a8\uf0a9\uf0aa
\uf0ab\uf0ac\uf0ad\uf0ae\uf0af
\uf0b0\uf0b1\uf0b2\uf0b3\uf0b4\uf0b5\uf0b6\uf0b7\uf0b8\uf0b9\uf0ba
\uf0bb\uf0bc\uf0bd\uf0be\uf0bf
\uf0c0\uf0c1\uf0c2\uf0c3\uf0c4\uf0c5\uf0c6\uf0c7\uf0c8\uf0c9\uf0ca
\uf0cb\uf0cc\uf0cd\uf0ce\uf0cf
\uf0d0\uf0d1\uf0d2\uf0d3\uf0d4\uf0d5\uf0d6\uf0d7\uf0d8\uf0d9\uf0da
\uf0db\uf0dc\uf0dd\uf0de\uf0df
\uf0e0\uf0e1\uf0e2\uf0e3\uf0e4\uf0e5\uf0e6\uf0e7\uf0e8\uf0e9\uf0ea
\uf0eb\uf0ec\uf0ed\uf0ee\uf0ef
\uf0f0\uf0f1\uf0f2\uf0f3\uf0f4\uf0f5\uf0f6\uf0f7\uf0f8\uf0f9\uf0fa
\uf0fb\uf0fc\uf0fd\uf0fe\uf0ff";
pos = renderParagraph(ctx,FontRepository.Arial,"Wingdings",pos);
pos = renderText(ctx,FontRepository.Wingdings,text,pos);
}

function renderWebdings() {
var ctx = document.getElementById('c').getContext('2d');
var text = "\u0009\u000a\u000d\u200c\u200d\u200e\u200f
\u2028\u2029\u202a\u202b\u202c\u202d\u202e\u206a\u206b\u206c\u206d
\u206e\u206f
\uf020\uf021\uf022\uf023\uf024\uf025\uf026\uf027\uf028\uf029\uf02a
\uf02b\uf02c\uf02d\uf02e\uf02f
\uf030\uf031\uf032\uf033\uf034\uf035\uf036\uf037\uf038\uf039\uf03a
\uf03b\uf03c\uf03d\uf03e\uf03f
\uf040\uf041\uf042\uf043\uf044\uf045\uf046\uf047\uf048\uf049\uf04a
\uf04b\uf04c\uf04d\uf04e\uf04f
\uf050\uf051\uf052\uf053\uf054\uf055\uf056\uf057\uf058\uf059\uf05a
\uf05b\uf05c\uf05d\uf05e\uf05f
\uf060\uf061\uf062\uf063\uf064\uf065\uf066\uf067\uf068\uf069\uf06a
\uf06b\uf06c\uf06d\uf06e\uf06f
\uf070\uf071\uf072\uf073\uf074\uf075\uf076\uf077\uf078\uf079\uf07a
\uf07b\uf07c\uf07d\uf07e
\uf080\uf081\uf082\uf083\uf084\uf085\uf086\uf087\uf088\uf089\uf08a
\uf08b\uf08c\uf08d\uf08e\uf08f
\uf090\uf091\uf092\uf093\uf094\uf095\uf096\uf097\uf098\uf099\uf09a
\uf09b\uf09c\uf09d\uf09e\uf09f
\uf0a0\uf0a1\uf0a2\uf0a3\uf0a4\uf0a5\uf0a6\uf0a7\uf0a8\uf0a9\uf0aa
\uf0ab\uf0ac\uf0ad\uf0ae\uf0af
\uf0b0\uf0b1\uf0b2\uf0b3\uf0b4\uf0b5\uf0b6\uf0b7\uf0b8\uf0b9\uf0ba
\uf0bb\uf0bc\uf0bd\uf0be\uf0bf
\uf0c0\uf0c1\uf0c2\uf0c3\uf0c4\uf0c5\uf0c6\uf0c7\uf0c8\uf0c9\uf0ca
\uf0cb\uf0cc\uf0cd\uf0ce\uf0cf
\uf0d0\uf0d1\uf0d2\uf0d3\uf0d4\uf0d5\uf0d6\uf0d7\uf0d8\uf0d9\uf0da
\uf0db\uf0dc\uf0dd\uf0de\uf0df
\uf0e0\uf0e1\uf0e2\uf0e3\uf0e4\uf0e5\uf0e6\uf0e7\uf0e8\uf0e9\uf0ea
\uf0eb\uf0ec\uf0ed\uf0ee\uf0ef
\uf0f0\uf0f1\uf0f2\uf0f3\uf0f4\uf0f5\uf0f6\uf0f7\uf0f8\uf0f9\uf0fa
\uf0fb\uf0fc\uf0fd\uf0fe\uf0ff";
pos = renderParagraph(ctx,FontRepository.Arial,"Webdings",pos);
pos = renderText(ctx,FontRepository.Webdings,text,pos);
}

function renderText(ctx,font,text,pos) {
for (var i = 0; i < text.length; i++) {
pos.x += render(ctx,font[text.charCodeAt(i)],pos.x,pos.y,size);
if (max_width - 40 < pos.x) {
pos.y += size *1.1;
pos.x = 30;
}
}

return pos;
}

function render(ctx,data,x,y,size) {
var console=document.getElementById('console');

ctx.save()
ctx.translate(x,y);
ctx.scale(size/10,size/10);
ctx.beginPath();
var type = -1;
var width = data[0];

for (var i=0;i < data.length ; i++) {
var type = data[i][0];
var length = data[i].length;
switch (type) {
case 0:
ctx.moveTo(data[i][length-2],data[i][length-1]);
break;
case 1:
for (var j=1; j < length ; j+=2) {
ctx.lineTo(data[i][j],data[i][j+1]);
}
break;
case 2:
for (var j=1; j < length ; j+=4) {
ctx.quadraticCurveTo(data[i][j],data[i][j+1],data[i][j+2],data[i]
[j+3]);
}
break;
case 3:
for (var j=1; j < length ;j+=6) {
ctx.bezierCurveTo(data[i][j],data[i][1],data[i][2],data[i]
[3],data[i][4],data[i][5]);
}
break;
}
}

ctx.fill();

ctx.restore();
return width*size/10 ;
}

== Font.html (only a part of) ==

== Arial.json (only a part of) ==

FontRepository.Arial=new Array();t=FontRepository.Arial;
FontRepository.Arial[92]=new Array(2.7783203,new
Array(0,2.078125,0.125),new
Array(1,0.0,-7.28125,0.703125,-7.28125,2.78125,0.125,2.078125,0.125),new
Array(4));

James Black

unread,

Aug 12, 2007, 12:37:34 AM8/12/07

to google-excanvas

On Jul 10, 4:13 am, Klaus Reimer <k...@ailis.de> wrote:
> It describes some possibilities of using text in a canvas. All these
> methods should work with excanvas because they are simply based on
> images or simple lines.

Unless there was some major change in the past month or so, my page
at http://dante.acomp.usf.edu/annotation/syntaxtree.php still doesn't
work in IE, but works fine on Firefox.