HTML5 the future – KineticJS

Story Horse?

Finally my first technical post.

The HTML5 gains strength and tends to become a standard language for Web rendering and also for rendering mobile. This trend today implemented by various Web / Mobile market frameworks.
HTML5 & CSS3 Support

HTML5 API’s You Didn’t Know Existed

One of them is the KineticJS.

I’ve been working with him something about six months.

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more

In order to understand what KineticJS is, you must be familiar with JavaScript development and should know the basics of HTML5 Canvas programming. KineticJS is a JavaScript library that helps us simplify the development of interactive HTML5 applications.

A simple example to show html code as an image inside a canvas

var content = ""</pre>
<div style="background-color: red;">Igor Souza test
<span style="color: white; text-shadow: 0 0 5px blue; 
font-size: 50px; font-family: times,sans-serif;">IGFASOUZA</span>
</div>
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>
<pre>
";

window.onload = function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 650
});
var layer = new Kinetic.Layer();
stage.add(layer);
var html = new Kinetic.HTML({
html : content,
callback : function() {layer.draw();},
draggable : true,
x : 30,
y : 30
});
layer.add(html);
}

A nice example that I found on the internet. The snake game .

One of the major challenges in Canvas is the question of performance.
Make a canvas with one layer and ten different objects and make a canvas with ten layer with one object in each is totally different.
Somehow, you have to try different approaches and see which one impacts less.

Follows three ideas to evaluate and improve the performance of your canvas.
HTML5 Canvas KineticJS Animation Stress Test

HTML5 Canvas KineticJS Drag and Drop Stress Test with 10,000 Shapes

HTML5 Canvas Shape Caching with KineticJS

References:
html5canvastutorials

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s