Thread: [matplotlib-devel] Canvas HTML5 backend

Hi,
  I'm trying to work on the canvas javascript backend I found here
[1]. I'm trying to add text but the canvas origin is at the top left,
how can I transform the co-ordinates from the matplotlib to canvas?

    def draw_text(self, gc, x, y, s, prop, angle, ismath=False):
        ctx = self.ctx
        ctx.font = "12px Times New Roman";
        ctx.fillStyle = "Black";
        ctx.fillText("%r" % s, x, y)

[1] http://bitbucket.org/sanxiyn/matplotlib-canvas/src/80e9abf6d251/backend_canvas.py

Regards, Michael

On Tue, Sep 1, 2009 at 10:32 AM, Michael Thompson<mic...@gm...> wrote:
> Hi,
>  I'm trying to work on the canvas javascript backend I found here
> [1]. I'm trying to add text but the canvas origin is at the top left,
> how can I transform the co-ordinates from the matplotlib to canvas?
>
>    def draw_text(self, gc, x, y, s, prop, angle, ismath=False):
>        ctx = self.ctx
>        ctx.font = "12px Times New Roman";
>        ctx.fillStyle = "Black";
>        ctx.fillText("%r" % s, x, y)
>
> [1] http://bitbucket.org/sanxiyn/matplotlib-canvas/src/80e9abf6d251/backend_canvas.py

The backend canvas should know its height, so height-y should
transform from bottom to top

2009/9/1 John Hunter <jd...@gm...>:
> On Tue, Sep 1, 2009 at 10:32 AM, Michael Thompson<mic...@gm...> wrote:
>> Hi,
>>  I'm trying to work on the canvas javascript backend I found here
>> [1]. I'm trying to add text but the canvas origin is at the top left,
>> how can I transform the co-ordinates from the matplotlib to canvas?
>>
>>    def draw_text(self, gc, x, y, s, prop, angle, ismath=False):
>>        ctx = self.ctx
>>        ctx.font = "12px Times New Roman";
>>        ctx.fillStyle = "Black";
>>        ctx.fillText("%r" % s, x, y)
>>
>> [1] http://bitbucket.org/sanxiyn/matplotlib-canvas/src/80e9abf6d251/backend_canvas.py
>
> The backend canvas should know its height, so height-y should
> transform from bottom to top

Thanks, turns out to be a problem setting the size of the canvas
element that the javascript is rendered into. If self.flipy is set
then the text.py takes care of subtracting y from the height.

Next problem is the text alignment, look OK on the right axis but
wrong on the left I presume it's the alignment.

The documentation says that s should be a matplotlib.text.Text
instance and I can use s.get_horizontalalignment() but it seems that s
is a unicode string. How can I find the alignment I should set on the
text?

Michael

On Tue, Sep 1, 2009 at 12:57 PM, Michael Thompson<mic...@gm...> wrote:
> 2009/9/1 John Hunter <jd...@gm...>:
>> On Tue, Sep 1, 2009 at 10:32 AM, Michael Thompson<mic...@gm...> wrote:
>>> Hi,
>>>  I'm trying to work on the canvas javascript backend I found here
>>> [1]. I'm trying to add text but the canvas origin is at the top left,
>>> how can I transform the co-ordinates from the matplotlib to canvas?
>>>
>>>    def draw_text(self, gc, x, y, s, prop, angle, ismath=False):
>>>        ctx = self.ctx
>>>        ctx.font = "12px Times New Roman";
>>>        ctx.fillStyle = "Black";
>>>        ctx.fillText("%r" % s, x, y)
>>>
>>> [1] http://bitbucket.org/sanxiyn/matplotlib-canvas/src/80e9abf6d251/backend_canvas.py
>>
>> The backend canvas should know its height, so height-y should
>> transform from bottom to top
>
> Thanks, turns out to be a problem setting the size of the canvas
> element that the javascript is rendered into. If self.flipy is set
> then the text.py takes care of subtracting y from the height.
>
> Next problem is the text alignment, look OK on the right axis but
> wrong on the left I presume it's the alignment.
>
> The documentation says that s should be a matplotlib.text.Text
> instance and I can use s.get_horizontalalignment() but it seems that s
> is a unicode string. How can I find the alignment I should set on the
> text?
>
> Michael
>


My understanding is that all the backends should use left-bottom
alignment. Text alignment in matplotlib is handled by mpl itself (not
by the backend), and for this to work, you have to define
get_text_width_height_descent method correctly.

The real question is how we know the metric of the font that will be
used for rendering. I have little knowledge about the html canvas
specification, but I presume that the situation is very similar to the
svg case. Unless we embed the fonts (the svg backend has an option to
embed the fonts as paths), I don't think it is possible to get it
right.

Again, I have little knowledge about html5 canvas thing, and I hope
any expert out ther clarify this issue.

-JJ

ps. gnuplot seems to use embedded fonts for their html5 canvas backend
(I haven't checked carefully but their demo output uses canvastext.js,
originally from  http://jim.studt.net/canvastext/)



> ------------------------------------------------------------------------------
> Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
> trial. Simplify your report design, integration and deployment - and focus on
> what you do best, core application coding. Discover what's new with
> Crystal Reports now.  http://p.sf.net/sfu/bobj-july
> _______________________________________________
> Matplotlib-devel mailing list
> Mat...@li...
> https://lists.sourceforge.net/lists/listinfo/matplotlib-devel
>

2009/9/1 Jae-Joon Lee <lee...@gm...>:
> My understanding is that all the backends should use left-bottom
> alignment. Text alignment in matplotlib is handled by mpl itself (not
> by the backend), and for this to work, you have to define
> get_text_width_height_descent method correctly.
>
> The real question is how we know the metric of the font that will be
> used for rendering. I have little knowledge about the html canvas
> specification, but I presume that the situation is very similar to the
> svg case. Unless we embed the fonts (the svg backend has an option to
> embed the fonts as paths), I don't think it is possible to get it
> right.

I see firefox 3.5 (html5) has a method to measure the width of the
text, I'll look at using this in a javascript function to render the
text.

 https://developer.mozilla.org/en/Drawing_text_using_a_canvas#measureText%28%29

>
> ps. gnuplot seems to use embedded fonts for their html5 canvas backend
> (I haven't checked carefully but their demo output uses canvastext.js,
> originally from  http://jim.studt.net/canvastext/)

yep noticed that, but didn't realize the significance of not using the
built in canvas text drawing.

Thanks, Michael

On Tue, Sep 1, 2009 at 6:03 PM, Michael Thompson<mic...@gm...> wrote:
> I see firefox 3.5 (html5) has a method to measure the width of the
> text, I'll look at using this in a javascript function to render the
> text.

I'm not sure if this helps. *Matplotlib* (not the browser) needs to
know the size of the text when it creates plots. And the issue is that
matplotlib does not know, in general, what font the browser will pick
up for rendering.

It seems that people are using @font-face embedding which are
supported by newer version of firefox and safari.
So, one option would be to use @font-face to specify (and provide) the
fonts that are used when the plot is created by matplotlib. The other
option is to embed the texts as paths as done in the svg banckend.
Of course, there always is a font license issue.

-JJ