Topic: Trouble with canvas text (Page 1 of 1)

Hi, sorry to bug you guys with this, but I'm stumped. The script works, but only after you refresh the darn page. It never works the first time. The original script had the user click to begin the script but I want it to load right away. I thought I did it right. Am I doing something wrong?

http://h1.ripway.com/tinyscript/glossycanvas/CanvasTextAlongApath.html
this is what the output looks like.

Thanks for any help.

I think it's because of this.

var img=new Image()
img.src="br.png"
ctx.drawImage(img,-20,-100)

You're probably using the image before it's loaded.

Easy fix is to put the image somewhere in the HTML document above and hide it so that the page load event won't happen until the image is loaded.
Or you can add a load event listener to the image when you first create it in the script and continue the rest of the drawing in the handler.

Thanks so much. It works great now. I wasn't aware that I needed to keep the image declaration global. You learn something new every day...when you're learning backwards LOL. All I had to do was put it outside of the draw function.

I want to add another little link to this page for you guys to look at.
http://h1.ripway.com/tinyscript/glossycanvas/firefoxrotate.html
No problems with it, but I thought is was cool and you might like it. Never mind the perspective of the images being so ugly, it's just simple transformation. I need to write a script to skew the image a little based on where it's at in the rotation, but I think the text looks good enough to work with. Maybe there is a way to save the text on the fly as an image and then skew it like an image. I think I read that you can do that with todataurl or something. Anyone know?