Blog

Raphaël JavaScript Test

November 19th, 2009

I ran across http://raphaeljs.com and it looked very appealing/impressive, so I thought I’d try it out. Raphaël is a JavaScript Vector Library that allows cross-browser drawing and animation of vector shapes dead simple. All you need to do to use it is to reference the raphael.js file in the head section of your HTML document (having the excanvas.js helps too).

Here is how I animated my header logo:

 <script type="text/javascript" charset="utf-8">
	window.onload = function() {
                     //below sets the canvas area
               var paper = Raphael(document.getElementById('headerimg'), 450, 150);
                    //this pulls in a logo on to the canvas
               var jlogo = paper.image("/wp-content/themes/noise/images/logo.png", 10, 10, 150, 150);
                   // you can also draw svg paths which ill show in the future
               var jtag = paper.image("/wp-content/themes/noise/images/jessetag.png", 130, 95, 250, 23);
                  //set the initial tagline width to 0px
             jtag.attr({width:0});
                 //wait 200ms to call function
             setTimeout(comboPush, 200);
                 //animate width to 250px within 1000ms
             function comboPush() { jtag.animate({width: 250}, 1000) };
        }
</script>

http://twitter.com/DmitryBaranovsk Dmitry Baranovskiy

1. You don’t need “new” operator in front of Raphael function.
2. How having excanvas.js will help?
http://jessefrye.com Jesse

1. Thanks for the tip. I don't know where that came from.
2. I thought ex-canvas library was used for IE support.
http://twitter.com/DmitryBaranovsk Dmitry Baranovskiy

1. You don’t need “new” operator in front of Raphael function.
2. How having excanvas.js will help?
http://jessefrye.com Jesse

1. Thanks for the tip. I don't know where that came from.
2. I thought ex-canvas library was used for IE support.
http://twitter.com/DmitryBaranovsk Dmitry Baranovskiy

Raphaël is not Canvas based, it is SVG based and it doesn’t use excanvas. It supports IE in its own way.

Sorry for such a late reply.