If I have ui elements in a canvas that I want to be clickable - what
is the best way to go about doing that? Do I need to create some kind
of collision detection to see if the mouse x,y is in a region? Or is
there some better way?

Hi,

Can anyone give me a function that returns the X/Y position of the
mouse pointer in relation to the canvas it;s over. I have one already
that seems to work regardless of how nested in DIVs it is. However if
it's nested in a TABLE it fails.

TIA.

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.rgraph.org (Updated October 25th)

Hi,

This is not a troll, even though it may distinctly smell like one. I'm
just interested in what people think about MSIE and canvas. For
instance, with it being in the HTML5 draft, do you think IE9 will
support it?

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.rgraph.org

Hi,

No nothing to do with the forthcoming US election, but here's a short
article on the canvas tag. Doubtless I'll add to it as time goes on.

http://www.phpguru.org/static/canvas.html

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.rgraph.org

http://www.phpguru.org/RGraph_dev/examples/text.html

:-)

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

> Javascript's trig functions work in radians, not degrees

Ah, that explains a lot... :-)

> (as do most
> other programming languages and libraries). To convert from degrees to
> radians, multiply by Math.PI/180 (e.g. Math.sin(45 * Math.PI/180) in
> this case). More generally though, for this sort of thing it helps to
> get into the habit of 'thinking' in radians and using them
> consistently across your application rather than having to convert
> between radians and degrees...

Well it's a public API, and people recognise degrees. Most probably
don't even know what a radian is (radioactive?), so for said API, I
think I'll have to stick with convertiong to radians.

>
> - Matt
>
>



--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

--- In canvas-developers@yahoogroups.com, "Richard Heyes"
<richard.heyes@...> wrote:
>
> Unfortunately the
> JS Math.sin function comes out differently tro my calculator
[...]
> Opposite = Math.sin(45) * 100
>
> Where 100 is the radius of the circle I'm drawing (for example) and 45
> is 45 degrees. I've just got to get it working... :-/

Javascript's trig functions work in radians, not degrees (as do most
other programming languages and libraries). To convert from degrees to
radians, multiply by Math.PI/180 (e.g. Math.sin(45 * Math.PI/180) in
this case). More generally though, for this sort of thing it helps to
get into the habit of 'thinking' in radians and using them
consistently across your application rather than having to convert
between radians and degrees...

- Matt

> Hm, I'm not sure why you need an arc() -- note that arc() doesn't
> actually draw anything, it just adds an arc to the current path.
> drawText ignores the current path (or should!). What you want is
> something like:

The translate method however needs coords to move to. I think it's
just some trig I need. And to get said trig working. Unfortunately the
JS Math.sin function comes out differently tro my calculator.

To recap, I'm trying to get horizontal text (ie readable) text at a
point but only knowing the angle in relation of the hypotenuse, and
the length of said line. So the equation would be:

Opposite = Math.sin(45) * 100

Where 100 is the radius of the circle I'm drawing (for example) and 45
is 45 degrees. I've just got to get it working... :-/

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

On Sep 28, 2008, at 9:25 AM, Richard Heyes wrote:

>> 1. Draw an arc using arc() (suprise) where the start and finish
>> angles
>> are the same. Thus no arc would be actually drawn, but (rather
>> handily) the pen is left at the end of the arc, giving a way to
>> specify radius and angle.
>>
>> 2. Draw the text.
>
> Actually scratch that, the drawText() method needs X/Y coords, so I
> would therefore need to know them as well. What would be nice is
> something analagous to ftell() that returns the X/Y coords.


Hm, I'm not sure why you need an arc() -- note that arc() doesn't
actually draw anything, it just adds an arc to the current path.
drawText ignores the current path (or should!).  What you want is
something like:

// move to the start of the line where you want the text to appear
translate(50,50);
// rotate by the angle that you want the text to be drawn at
rotate(Math.PI / 4);
// draw the text
fillText("Hello World", 0, 0);

Or am I misunderstanding the effect that you're trying to achieve --
I'm assuming you're trying to get an angled line of text drawn?

      - Vlad

> 1. Draw an arc using arc() (suprise) where the start and finish angles
> are the same. Thus no arc would be actually drawn, but (rather
> handily) the pen is left at the end of the arc, giving a way to
> specify radius and angle.
>
> 2. Draw the text.

Actually scratch that, the drawText() method needs X/Y coords, so I
would therefore need to know them as well. What would be nice is
something analagous to ftell() that returns the X/Y coords.

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

Hi,

I'm using the CanvasText functions to render text but am trying to get
a function which fits the name DrawTextByAngle(). It's for a pie chart
for example. I could write one, but was wondering if anyone has
already written one (a better one no doubt)...?

I reckon the process would be something like:

1. Draw an arc using arc() (suprise) where the start and finish angles
are the same. Thus no arc would be actually drawn, but (rather
handily) the pen is left at the end of the arc, giving a way to
specify radius and angle.

2. Draw the text.

Caveats:

This process when stroked would end up with a line from 0,0 to the
start of the text (ie the arc) Not such a problem as long as you can
set the pen colour to the same as the background. But graduated
backgrounds become problematic. I already have a DrawLineByAngle()
function which uses this method.

Thanks.

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

Guess I should add that this is running on Firefox 3.0b5 on a Redhat
Linux system.

We are experimenting with using Canvas for a simple web base weather
product display application.  I have upload a screenshot to our photos
section:

http://small-url.com/?67

As you can see (maybe), where the product image overlays the map
image, the map lines seemed to have been changed (sort of merged with
the product).  I am using "destination-over", but it does not seem to
be leaving the destination "untouched".  Here is some of the code (the
images and product display are 512x512):

   //
   // Draw the merged Maps
   //
   ctx.putImageData(maps.getMapImageData(), 0, 0);

   //
   // Draw the Product
   //
   ctx.globalCompositeOperation = 'destination-over';
   ctx.drawImage(img, 0, 0, img.width, img.height,
                      0, 0, pd_width, pd_width);

Now one problem I had from the start is that the map images are a PNG,
but all the pixels get changed to transparent via canvas (they are not
transparent in the PNG file).  I wrote some stupid code to get around
this (imgd is an ImageData object):

   //***********************************************************
   //
   function pfixTransparency(imgd) {
   //
   //***********************************************************
     //
     // A stupid workaround for a problem I do not understand.
     // Certain images seems to get the alpha bit set to zero.
     // I do not know why, but we must set it back to 255.
     //
     for (var i=0; i<imgd.width*imgd.height; i++) {
       imgd.data[i*4+3] = 255;
     }
   }
   this.fixTransparency = pfixTransparency;

Any ideas?

Hi,

> I think the key to understanding it is realising that scale(),
> rotate(), translate() and transform() change the coordinate system (so
> that, for example, the point (0,0) becomes somewhere else besides the
> top-left corner) - NOT the current pen position or the appearance of
> anything that's been drawn already. It's the coordinate system that is
> being remembered by save() and restore() (along with some other bits
> and pieces like fill style).

Now that helps. I think based on that, I don't imagine I'd need too
much, if at all.

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

--- In canvas-developers@yahoogroups.com, "Richard Heyes"
<richard.heyes@...> wrote:
>
> > ...
>
> Well, thank you. Still don't "get" it. Fortunately I haven't needed
> save() or restore() yet. Mind you, I wouldn't would I... :-)

I think the key to understanding it is realising that scale(),
rotate(), translate() and transform() change the coordinate system (so
that, for example, the point (0,0) becomes somewhere else besides the
top-left corner) - NOT the current pen position or the appearance of
anything that's been drawn already. It's the coordinate system that is
being remembered by save() and restore() (along with some other bits
and pieces like fill style).

> ...

Well, thank you. Still don't "get" it. Fortunately I haven't needed
save() or restore() yet. Mind you, I wouldn't would I... :-)

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

--- In canvas-developers@yahoogroups.com, "Richard Heyes"
<richard.heyes@...> wrote:
>
> Hi,
>
> Apparently I didn't quite get it - I made an example here:
>
> http://www.phpguru.org/RGraph_dev/examples/text.html
>
> My understanding is this:
>
> 1. We're at 0,0
> 2. Save the current state
> 3. Do some stuff, ie move to 100,100 and draw a circle and fill it.
> 4. Call restore(). As I understand this will move us back to 0,0
> 5. It doesn't.
>
> When the line is drawn I would have expected it to come from 0,0, ie
> the position at which save() was called, but it doesn't. It comes from
> where it finished drawing the circle. What am I doing wrong? Or have I
> completely misunderstood?
>
> Thanks!
>
> --
> Richard Heyes
>
> HTML5 Graphing for FF, Chrome, Opera and Safari:
> http://www.phpguru.org/RGraph
>

I think, it depends on if you are asking about path or position.

According to
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas.html#the-\
canvas.

"The current path and the current bitmap are not part of the drawing
state. The current path is persistent, and can only be reset using the
beginPath() method. "

Positions. or transforms, are part of the state and therefore restored.

Hi,

Apparently I didn't quite get it - I made an example here:

http://www.phpguru.org/RGraph_dev/examples/text.html

My understanding is this:

1. We're at 0,0
2. Save the current state
3. Do some stuff, ie move to 100,100 and draw a circle and fill it.
4. Call restore(). As I understand this will move us back to 0,0
5. It doesn't.

When the line is drawn I would have expected it to come from 0,0, ie
the position at which save() was called, but it doesn't. It comes from
where it finished drawing the circle. What am I doing wrong? Or have I
completely misunderstood?

Thanks!

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

> no, restore doesn't erase the drawing. it acts over the context, allowing
> you to save, plot a pink line, restore and back drawing black lines again.

Great, thank you.

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

On Tue, Sep 23, 2008 at 4:59 PM, Richard Heyes <richard.heyes@...> wrote:
> if I draw some stuff, but don't call
> stroke() to apply it to the canvas, then save(), do some stuff, call
> restore(), would that undrawn stuff still be there?

save() and restore() do not affect the path at all. So if you do

   ctx.rect(...);
   ctx.save();
     ctx.beginPath();
   ctx.restore();
   ctx.stroke();

then the rectangle will not be drawn, because beginPath() blows away
the current path and restore() does not restore the path.

HTML 5
(http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas.html#the\
-canvas0
- "The canvas state") defines exactly what is affected by
save()/restore(), and says "Note: The current path and the current
bitmap are not part of the drawing state. The current path is
persistent, and can only be reset using the beginPath() method. The
current bitmap is a property of the canvas, not the context."

--
Philip Taylor
excors@...

> I hope that answers your question?

It helps a lot thanks. So if I draw some stuff, but don't call
stroke() to apply it to the canvas, then save(), do some stuff, call
restore(), would that undrawn stuff still be there?

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

Hi,

Can someone explain the save() and restore() functions?

Thanks.

--
Richard Heyes

HTML5 Graphing for FF, Chrome, Opera and Safari:
http://www.phpguru.org/RGraph

On Thu, Sep 18, 2008 at 1:55 PM, Richard Heyes <richard.heyes@...> wrote:
> Anyone have an example of MooCanvas that works? I have a bare bones
> example that doesn't appear to be working:
>
> http://www.phpguru.org/moo/test.html

Moocanvas requires a doctype and UTF-8 encoding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	 <head>
		 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
...

Firebug is showing an error in your test case: $("startExample") is null.

$("startExample") is the same as
document.getElementById('startExample'), so you are missing an element
with id, startExample.

There are quite a few test case examples here:
http://ibolmo.com/projects/moocanvas/demos/tests.php

Also, just to keep in mind, Excanvas automatically replaces canvas
tags in the page but has to have the canvas elements initialized if
they are created dynamically. Moocanvas works just the opposite. If a
canvas tag is in the page already you have to replace it and new
canvas tags are already initialized.

I haven't ever used the new Canvas class. Instead I create new canvases with:

			 myCanvas = new Element('canvas', {
				 'id': 'myCanvas',
				 'width': 100,
				 'height': 100
			 }).inject(document.body);

G.

On Thu, Sep 18, 2008 at 1:55 PM, Richard Heyes <richard.heyes@...> wrote:
> Hi,
>
> Anyone have an example of MooCanvas that works? I have a bare bones
> example that doesn't appear to be working:
>
> http://www.phpguru.org/moo/test.html
>
> Thanks.
>
> --
> Richard Heyes
>
> HTML5 Graphing for IE7, FF, Chrome, Opera and Safari:
> http://www.phpguru.org/RGraph
>
> ------------------------------------
>
> Yahoo! Groups Links
>
>
>
>