AJAX

CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Feb 2007

Posts: 4

Reputation: avastreg is an unknown quantity at this point

Solved Threads: 0

avastreg

Offline

Newbie Poster

CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Mar 16th, 2009

Hi to all, this is a related Firefox problem.

I have a menu in which is applied typeface script.

Typeface 0.11 version doesn't support hover on links. There is an experimental version but doesn't work very well for me, so i tried to implement hover by myself.

Problem is: hover works pretty well changing canvas context property fillColor and then calling fill(), but the stroke on hovered voice remains on another color.

Difficult to explain, so i put some test code online: TEST CODE

As you can see, passing with mouse on the menu voices triggers the hover and the element change, but remains bordered in red.

I tried in many ways, without success.

The core of the hover is this:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
var ctx = vectorElement.getContext('2d');
 
 
if (ctx.fillStyle.toUpperCase() != '#DF1C1C') { //control if it's already in that color
 
   ctx.fillStyle = '#DF1C1C';
   //ctx.strokeStyle = '#DF1C1C';   //tried this to change the stroke style                             
 
   //ctx.clearRect(0, 0, 1000, 1000); //tried this to clean the rectangle
 
   ctx.fill();
   //ctx.stroke();  //tried this to repaint the stroke                          
}
var ctx = vectorElement.getContext('2d');


if (ctx.fillStyle.toUpperCase() != '#DF1C1C') { //control if it's already in that color

   ctx.fillStyle = '#DF1C1C';
   //ctx.strokeStyle = '#DF1C1C';   //tried this to change the stroke style                             

   //ctx.clearRect(0, 0, 1000, 1000); //tried this to clean the rectangle

   ctx.fill();
   //ctx.stroke();  //tried this to repaint the stroke                          
}

Any ideas?? Thanks in advance to all!

•

Join Date: Feb 2007

Posts: 4

Reputation: avastreg is an unknown quantity at this point

Solved Threads: 0

avastreg

Offline

Newbie Poster

Re: CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Mar 18th, 2009

no canvas experts here?

•

Join Date: Sep 2005

Posts: 1,082

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Mar 18th, 2009

Is it possible to redraw the canvas on however, or is that too slow?

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Feb 2007

Posts: 4

Reputation: avastreg is an unknown quantity at this point

Solved Threads: 0

avastreg

Offline

Newbie Poster

Re: CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Mar 19th, 2009

•

Originally Posted by digital-ether

Is it possible to redraw the canvas on however, or is that too slow?

thank you for the answer!

anyway it's not possible because it becomes too slow (and the resulting effect is that some event like mouseout is lost at random time).

I think the best way to resolve my problem could be "cleaning" the canvas area, but i found only the "clearRect" method: seems that it doesn't work.

The definition is

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

clearRect (x, y, w, h)

, with

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

x,y

as the top-left point of the area and

Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

w,h

width and height of the rectangle.

I don't understand if the top-left point (starting point) is referred to the area itself (so 0,0 is the starting point), or it's referred to the document / viewport.

Any hint on cleaning that area? Or what coords i have to pass into clearRect function??

•

Join Date: Sep 2005

Posts: 1,082

Reputation: digital-ether is just really nice

Solved Threads: 66

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Mar 19th, 2009

•

Originally Posted by avastreg

thank you for the answer!

anyway it's not possible because it becomes too slow (and the resulting effect is that some event like mouseout is lost at random time).

I think the best way to resolve my problem could be "cleaning" the canvas area, but i found only the "clearRect" method: seems that it doesn't work.

The definition is
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
clearRect (x, y, w, h)
clearRect (x, y, w, h)
, with
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
x,y
x,y
as the top-left point of the area and
Help with Code Tags

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
w,h
w,h
width and height of the rectangle.

I don't understand if the top-left point (starting point) is referred to the area itself (so 0,0 is the starting point), or it's referred to the document / viewport.

Any hint on cleaning that area? Or what coords i have to pass into clearRect function??

I'm sure it would be relative to the canvas object. Wouldn't make any sense otherwise.

I'm not too familiar with canvas. I think I read somewhere that it isn't possbile to edit/manipulate elements, but thats something to validate. I remember it was mentioned SVG as a better alternative if you wanted to edit stuff. (Actually I distinctly remember looking at some source code that had to cache canvas objects in order to support an undo property. So I'm pretty sure you cannot edit canvas elements).

I think you could get away with drawing two canvas elements up front. Once for hover, and non-hovered. Then just use display:none;

For hover, its more efficient if you put in a timeout. The timeout would trigger the hover change, after say 100 millisecs. If the user un-hovers, then just cancel the effect. That is a lot more efficient then immediate changes, and more fluid.

BTW: you can get canvas working in IE with excanvas.
http://excanvas.sourceforge.net/

Though in my experience (2-3 years or so ago) it doesn't work with objects created after the DOM rendered. You have to hack it to re-parse the DOM after you create a new Canvas. Hopefully thats fixed now.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Feb 2007

Posts: 4

Reputation: avastreg is an unknown quantity at this point

Solved Threads: 0

avastreg

Offline

Newbie Poster

Re: CANVAS: How I can change canvas stroke on a typeface hover? stroke() doesn’t work

Mar 24th, 2009

Thank you for answer again!

•

Originally Posted by digital-ether

[...]
For hover, its more efficient if you put in a timeout. The timeout would trigger the hover change, after say 100 millisecs. If the user un-hovers, then just cancel the effect. That is a lot more efficient then immediate changes, and more fluid.

Yes it's already so with timeouts, if you look at the first "test code".

•

Originally Posted by digital-ether

BTW: you can get canvas working in IE with excanvas.
http://excanvas.sourceforge.net/

Seems a joke but in IE with vml it works almost perfectly! =)
Anyway ExCanvas is a very good option, I already use it for other things.

•

Originally Posted by digital-ether

Though in my experience (2-3 years or so ago) it doesn't work with objects created after the DOM rendered. You have to hack it to re-parse the DOM after you create a new Canvas. Hopefully thats fixed now.

The facts are that you can change canvas object properties and "redraw" without remove the DOM element:

as I posted in stackoverflow,

i don't explain myself this behaviour: i have done a test file with a canvas object (http://avastreg.ilbello.com/canvas/test.html).

Here i've put a form in which dimensions for clearRect can be sended through the form. When you trigger mouseover on the canvas (NEWS), it applies clearRect with that coords. On mouseout he refills.

Starting values are :

x = 0, y = 0, w = 200, h = 200. Notice that doesn't work.

Then try something like

x: -10000, y: -10000, w: 50000000, h: 50000000 => it seems a joke but this works!

With other values it goes partially cleared.

Someone answer me this:

•

Your NEWS text appears to be a child of the canvas, and you are trying to use the draw operations to affect it. Don't do that, the behaviour is undefined; canvas should never have children. Either draw the text into the canvas or overlay an opaque canvas over the text using absolute positioning

I've tried removing the text inside canvas, but it continues to work only with that non-sense values and stroke() doesn't work too.

I think that maybe there not must be text inside the canvas element when i create it, but this is a typeface action.

In conclusion, i can't get rid of it. The only way is use

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
clearRect( -10000, -3000, 50000000, 50000000);
clearRect( -10000, -3000, 50000000, 50000000);