Getting Started

First things first, welcome to using bHive Canvas, a framework I’ve designed to make using the <canvas> element a little easier. Let’s introduce you to what:

Bhive is…

A JavaScript framework that allows you to quickly and easily use the HTML5 canvas tag to create animations, simple games and motion graphics for your website or blog, it’s up to you.

bHive isn’t…

A Flash replacement, the canvas tag’s performance is still slow in comparison to Flash, this being said the canvas object is more than capable in the hands of the right person, just visit Canvas Demos to see that.

bHive doesn’t do checking…

bHive assumes it’s running in an environment that is capable of using it. When using bHive on a live environment it is reccomended that you have your own checking in place so that your site or application degrades gracefully.

Choosing the right version

Firstly download the version of bHive you wish to work with.

There are two versions of bHive on offer the development version or the production version. The production version of bHive has been minified using the Yahoo Compressor to reduce the file size and is reccomended that you use this version on live sites.

If you wish to extend, modify or generally mess around with bHive, then the development version is for you.

The easiest installation

It can’t be any simpler to install bHive! Just extract the JavaScript file bHive-x.x.x.js from the zip file you downloaded and link to it. Simple!

<script src="[path to]/bHive-x.x.x.js"></script>

Replace x.x.x with the version of the library you’re using.

Using bHive for the first time

bHive should be created when the document is ready to be manipulated, that way the DOM object is fully loaded and bHive can successfully attach itself to the specified object.

You can accomplish this by using the onload method of the body tag, by creating your own add event function or just use jQuery like everyone else!

Using body onload

<body onload="[your function]">
...
</body>

Using jQuery

<script>
	$(document).ready(function() {
		...
	});
</script>

Creating bHive

Once you have chosen your preferred method of initialising bHive you need to create the main object. This is done by creating a new instance of the bHive class.

engine = new bHive({
	width: 100,
	height: 100,
	domobject: 'myDOMObject'
});

In the above example we’ve created a bHive object assigned to the variable ‘engine’. This variable can be whatever you want.

Using jQuery the code block would look similar to this:

<script>
	$(document).ready(function() {
		engine = new bHive({
			width: 100,
			height: 100,
			domobject: 'myDOMObject'
		});

		...
	});
</script>

Rather than working directly within the jQuery ready method is to define your own function.

<script>
	$(document).ready(function() {
		mybHiveFunction();
	});
</script>

Then perform all your operations on bHive within this, the script now looks like this:

<script>
	$(document).ready(function() {
		mybHiveFunction();
	});

	function mybHiveFunction() {
		engine = new bHive({
			width: 100,
			height: 100,
			domobject: 'myDOMObject'
		});

		...
	}
</script>

The Canvas Object

When bHive is first created it automatically creates and adds a child canvas element to the domobject. In the above example this is set to ‘myDOMObject’. The DOM object can be any object with an ID attribute set.

bHive is now ready to be used, see the other docs for a more detailed break down of each object.