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

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

···

On Tue, Sep 1, 2009 at 10:32 AM, Michael Thompson<michaelnt@...149...> 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

2009/9/1 John Hunter <jdh2358@...149...>:

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 10:32 AM, Michael Thompson<michaelnt@...149...> wrote:

2009/9/1 John Hunter <jdh2358@...149...>:

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/)

···

On Tue, Sep 1, 2009 at 12:57 PM, Michael Thompson<michaelnt@...149...> wrote:

On Tue, Sep 1, 2009 at 10:32 AM, Michael Thompson<michaelnt@...149...> wrote:

------------------------------------------------------------------------------
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
Matplotlib-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/matplotlib-devel

2009/9/1 Jae-Joon Lee <lee.j.joon@...149...>:

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()

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

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

···

On Tue, Sep 1, 2009 at 6:03 PM, Michael Thompson<michaelnt@...149...> 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.