RaphBoard v

Cross-browser drawing board based on
Raphaël JavaScript Vector Library

Welcome to RaphBoard!

RaphBoard is on-line cross-browser drawing board ("whiteboard", "blackboard", "greenboard",...) that uses HTML5 Canvas and JavaScript instead of Flash.

What would you say, how much programming is needed to put such drawing board on your site? Well, how about this much:

$( "#board" ).RaphBoard();

Yap. Neat, huh?

Now, how is THAT possible?

Actually, it does take a little more than that, but not much more:

1. Download the archive by clicking on one of the buttons at the top right corner
2. Unpack the archive to some temporary folder
3. Copy (FTP,...) raphael-min.js and jquery.raphboard.min.js to your site
4. (If you don't have jQuery already included in your page, get it from here)

5. Include those files in the <head> section of the page:

<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jquery.raphboard.min.js"></script>

6. RaphBoard will take container's (<div>) dimensions, so don't forget to give it some style (put this also in the <head> section):
```
<style>
	#board {
		width: 650px;
		height: 380px;
		background-color: black;
	}
</styl>
```

7. Add this to the <body> of your page (you can also put the script in the <head> section):

<div id="board"></div>

<script type="text/javascript">
	$( document ).ready( function( $ ) {
		$( "#board" ).RaphBoard();
	});
</script>

That's it!

Wanna test drive?

The board at the top of this page is fully functional RaphBoard! Go on, give it some swindle.

Rather Drive Stick?

If you'd rather pull the hood up, fiddle with the valves and mess around with grease, then check out the service manual.

Too cool to RTFM?

Right! Then zoom to playground and nock yourself out!

Authors & Contributors

Made possible by @DmitryBaranovskiy. Thank you, Dmitry!
Created by @MiroHibler.

Support & Contact

Oh noes?! Having trouble with RaphBoard? Rush to the forum and we’ll try to help you sort it out.