gdzgshum / canvas-text Goto Github PK

This is not actually a bug in a true sense.

We are trying to render a text inside canvas and the speed of the library
in IE is awful.

We basically need the ability: to draw a text, resize it and rotate it.
We do not need more than one font.

In short is there anything we should do to speed up text rendering in IE?

We can even "donate" some time to the project and help you with this.

Custom typeface font faces are not loading unless I comment out line 73 (the 
dummy loadFace function)

This is in all the latest browsers on osx (safari, chrome, ff)

Can you explain what this snippet on line 73 is supposed to do?  as far as I 
can tell font faces will never be loaded in any capable browser so obviously I 
am missing something here.

// If the text functions are already here or if on the iPhone (fillText exists) 
: nothing to do !
if (proto.fillText && !ctxt.options.reimplement && 
!/iphone/i.test(navigator.userAgent)) {
// This property is needed, when including the font face files
return window._typeface_js = {loadFace: function(){}};  // this has to be 
commented out to work
}

What steps will reproduce the problem?
1. I set dontUseMoz=true | reimplement=true | autoload=false
2. I want load font which contains spaces characters in name (I.E DejaVu
Sans, DejaVu Serif...)

What is the expected output? What do you see instead?
If I rename font file like dejavu_serif-normal-normal.js, I can load
typeface file but have this js error :
Erreur : this.faces[family] is undefined
Fichier Source :
http://domaine.ltd/canvas.text.js?dontUseMoz=true&reimplement=true&autoload=fals
e
Ligne : 158

This is beacause there in the dejavu_serif-normal-normal.js file, the
"familyName" property is set to "DejaVu Serif".

To correct this we have to modify any typeface file "familyName" property,
I.E we can use DejaVuSerif and load dejavuserif-normal-normal.js file.

Hi

Are there any working examples for ie6 and latest opera? all demos are
broken in this browsers.

Thanks, Oleg

First two demos show no canvas text at all (but regular html text and the 
canvas alignment lines and boxes are visible); third demo has what looks to 
be issue erasing, 4th works sometimes, other times either fails entirely or 
fills in text outside of the expected window. Simply reloading gives 
different behaviors, apparently randomly. 

ipod touch OS 3.1.2 with Safari. 

This is presumably comparable with Safari 3, which has no native canvas text 
support. 

A good feature would be to add an equivalence table to draw in a font that
looks like the one wanted, even if its typeface file not available on the
server.

This could be like this :

{{{
var equivalences = {
  'arial': ['optimer', 'dejavu sans'],
  'times new roman': ['freeserif']
}; 
}}}

A starting base could be
http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefac
es/
. There must other web pages like this to make a good equivalence table.

What steps will reproduce the problem?
1. View the "Transformations" demo in Firefox
2. View the "Transformations" demo in Internet Explorer 6 or 7 (possibly 8
too - but as yet untested)
3. Note mismatch between typefaces.

What is the expected output? What do you see instead?

In Firefox (3.0.14) the "Vertical and Stroke" portion of the demo is being
rendered in what appears to be Times New Roman, despite all the fonts
specified in the document being sans-serif.
In IE the whole demo appears sans-serif but the fonts are rendered at
subtly different sizes from FF - and the "Vertical and Stroke" portion
spills off the bottom of the canvas.

What version of the product are you using? On what operating system?

This happens with the live demos as of today (2009-10-03).

Please provide any additional information below.

Attached is a screenshot of the canvas from FF and IE showing the mismatch
between them.  This happens with other demos too - the animation example
correctly sets the typeface in FF but not in IE.

how about the support fillStyle like 
"context.fillStyle='rgba('+p.red+','+p.green+','+p.blue+',1.0)'"?

What steps will reproduce the problem?
1. invoke measureText with single parameter
2. observe result

What is the expected output? What do you see instead?
Expected output is few times larger than real output.

What version of the product are you using? On what operating system?
Unknown, does not say in header ' * @version $Revision$'

Please provide any additional information below.
I'm using attached font file.

What steps will reproduce the problem?
1. Set reimplement=true, autoload=false, debug=true, and load some typeface-js 
face files.
2. Fill some text in canvas

What is the expected output? What do you see instead?
My browser caught error that 'ctx is not defined' from canvas.text.js

What version of the product are you using? On what operating system?
rev 48. Win7. Both IE and chrome.

Please provide any additional information below.
I think "ctx." (in line 293, 329) should replaced with "this."

See line 89 of the source code.

src.indexOf(libFileName) > 0 is used where src.indexOf(libFileName) != -1
should be used.

If you use src="canvas.text.js" in your tag and you run a page using a
browser that returns the value of the attribute with .src instead of the
full url (like IE7) then canvas text will break because basePath won't be
set and thus fonts can't be found.

Easy fix, but it caused trouble for me the past few days trying to find out
why only IE was broken when I had ExCanvas and canvas-text.

dd

Canvas area is empty. There is something like this in error message:

JavaScript - 
http://canvas-text.googlecode.com/svn/trunk/examples/textposition.html
Event thread: load
Error:
name: TypeError
message: Statement on line 344: Cannot convert undefined or null to Object

What steps will reproduce the problem?
ctx.strokeText(70, x, y)

What is the expected output? What do you see instead?
i see "70" on my canvas (like in chrome, and safari on desktop without 
using canvas-text)

What version of the product are you using? On what operating system?
download on download page on code.google.com

Please provide any additional information below.
Solved:
(aproximatoly line 252)
In: "proto.renderText = function(text, style){
Change: chars = text.split(''),
To: chars = text.toString().split(''),

The three font properties (font, textAlign, textBaseline) should be included in 
save/restore operations on the canvas context. Assuming excanvas is already 
defined, a small change similar to the following will enable save/restore 
points to include font settings. Obviously, you could improve this for ordering 
robustness (this assume save and restore are already defined), but this is the 
basic idea.

  function copyFState(o1, o2) {
    o2.font = o1.font;
    o2.textAlign = o1.textAlign;
    o2.textBaseline = o1.textBaseline;
  }
  proto.save_am_ = proto.save;
  proto.save = function() {
    this.save_am_();
    var o = {},
      fStack = this.fStack_;
    copyFState(this, o);
    if (!fStack) {
      this.fStack_ = fStack = [];
    }
    fStack.push(o);
  }
  proto.restore_am_ = proto.restore;
  proto.restore = function() {
    copyFState(this.fStack_.pop(), this);
    this.restore_am_();
  }

What steps will reproduce the problem?
1. Download canvas.text.js and include in project.
2. Download font pack and copy files to /faces relative to solution folder.
3. Add <!--[if IE]><script type="text/javascript" 
src="canvas.text.js"></script><![endif]--> to head of html document after 
<!--[if IE]><script type="text/javascript" 
src="excanvas.js"></script><![endif]-->. Firefox is already able to display 
text content of page without problems.
4. Direct IE <=8 to same page.

What is the expected output? What do you see instead?
Text being rendered, instead nothing. Error is:
Message: 'glyphs' is null or not an object
Line: 344
Char: 7
Code: 0
URI: http://localhost:1721/canvas.text.js

Please provide any additional information below.

I downloaded the 'helvetiker' font type. The following and variations thereof 
seem to have no effect:
context.font = 'bold 12px helvetiker';