Implement text rendering

[GoogleCodeExporter]

VML has some text support and we should be able to get basic text support 
working in canvas.

Original issue reported on code.google.com by erik.arv...@gmail.com on 25 Feb 2009 at 5:30

[GoogleCodeExporter]

I tried to implement text support in ExCanvas, I based my implementation on the 
work
I made on the lib I made to add this support on browsers that don't already do :
http://code.google.com/p/canvas-text/. This lib works on IE 6/7/8 with 
ExCanvas, but
is really slow as it draws the glyphs with the canvas functions moveTo, lineTo 
and
quadraticCurveTo.
A solution is, as you said, to use the VML text support. I joined a patch 
containing
these features (strokeText, fillText and measureText). It implements a big part 
of
the W3 spec (a little bit less than my implementation in canvas-text : the 
biggest
problem is that it doesn't take x/y scale into account, but can it be fixed 
with the
Matrix filter). The patch also contains the little modifications I talked about 
in
another issue (little code optimizations).

Please let me know whet you think about it.

Fabien

Original comment by fabien.menager on 13 Apr 2009 at 8:02

Attachments:

• excanvas_textmethods.patch

[GoogleCodeExporter]

Original comment by erik.arv...@gmail.com on 19 Apr 2009 at 7:27

• Changed state: Started

[GoogleCodeExporter]

how do i use this patch?

Original comment by roeyco...@gmail.com on 16 Feb 2010 at 1:45

[GoogleCodeExporter]

You don't need to, just use this file from the SVN trunk : 

http://explorercanvas.googlecode.com/svn/trunk/excanvas.js

Original comment by fabien.menager on 16 Feb 2010 at 2:15

[GoogleCodeExporter]

When drawing text the XY coords are a little off - it looks to be about 10px on 
the Y coords, see attachments

Original comment by waynejwe...@gmail.com on 9 Jun 2010 at 4:08

Attachments:

• dragbert.html
• chrome-canvas.png
• ie-canvas.png

[GoogleCodeExporter]

Also some fonts aren't rendered as they should. 
Here a sample:
------
this.ctx.fillStyle = "black";

this.ctx.font = "30px 'Arial'";
this.ctx.fillText(this.ctx.font,30,30);

this.ctx.font = "30px 'Times New Roman'";
this.ctx.fillText(this.ctx.font,30,70);

this.ctx.font = "30px Arial";
this.ctx.fillText(this.ctx.font,30,30);
------

As you look on the attachment the first 2 texts get rendered bold and italic 
and not normal.
Another third problem is: if you dont put quotes around the font names (i.E. 
30px Arial) the browser renders this text using a random(?) font. On my system 
as Vivadi in case of Arial. 

Original comment by danielk...@gmail.com on 28 Jul 2010 at 4:42

Attachments:

• Fonts.png

[GoogleCodeExporter]

Awesome, didn't know that this was here, much kuddo's.

Original comment by matthijn...@gmail.com on 9 Mar 2011 at 10:28

[GoogleCodeExporter]

This is excellent, even if it may not work perfectly.

Original comment by waynejwe...@gmail.com on 20 Dec 2011 at 1:45

[GoogleCodeExporter]

When (if at all) will this patch be integrated?

Original comment by schan...@bootstrapworld.org on 22 Feb 2012 at 7:48

[GoogleCodeExporter]

I've encountered an interesting situation regarding this, where the fillText is 
happening asynchronously. the fillText() returns immediately and the javascript 
code continues as if the text was drawn, even if it hasn't. The text only gets 
drawn once the javascript goes idle.

The problem here is that I have an animation loop, and instead of the 
fillText() slowing down the animation (acceptable), the animation just 
continues whether there's time to draw the text or not. If there's no time, no 
text gets drawn. This results in "flickering" as in some frames the text gets 
squeezed in, other times it doesn't. 

By removing the "clear canvas" at the beginning of each frame, it becomes 
obvious that, as soon as the javascript goes idle, ALL of the fillText calls 
happen at once, and it blits a streak of text across the screen.

Is there any way to make the fillText() halt and wait for the text to be drawn 
before returning? The current behavior makes animation nearly impossible.

Original comment by tresch...@gmail.com on 26 Mar 2012 at 11:54

[GoogleCodeExporter]

Treschlet,

Have you found a solution yet for the flickering of text in excanvas?

If you have I would very much like to know because I’m struggling with the 
same problem.

Original comment by onhar...@dds.nl on 16 Apr 2012 at 10:04

[GoogleCodeExporter]

I'm experiencing the flickering text problem too, anyone have suggestions how 
to work around this?

Original comment by snick...@gmail.com on 6 Oct 2012 at 2:35