Fun with HTML5 Canvas and FaceBook API

Oct 29, 2010 insic 8 Comments

Couple of days back I am experimenting Facebook API and the HTML 5 canvas. And It happens that I stumble this brilliant example by Mr. Doobs’ HTML5 canvas experiment.

I implemented same idea and logic the only difference here is it is integrated to Facebook and I made it as a plugin to jQuery.

Here is the final output of this article. You need to login in you Facebook account to see it in action.

View Demo

First you need to Download Facebook’s PHP Library in Github

Extract this archive into a directory on your hosting server where you can host and run PHP code:

Replace the IDs in index.php to have your own app information

It should look like this when you’re done:

Add the Facebook Javascript SDK you to access all of the features of the Graph API via JavaScript.

In case of this example the code looks like the following:

Add the required jQuery library and the plugin. Add the following line of code in the bottom part of your html before the closing of the body tag

In the above code we have assigned our variable bgImage the profile picture of the authenticated user.

The jQuery Plugin

View Application in action Demo

About the author: insic

Subscribe in my RSS Feed for more updates on Web Design and Development related articles. Follow me on twitter or drop a message to my inbox.