Book Review: Instant KineticJS Starter

April 28th, 2013 by Adrian

KineticJS Starter Book Cover

Instant KineticJS Starter

Create Flash-like mobile supported applications using KineticJS!
by Andrey Kovalenko
49 pages long
Published by Packt Publishing


  • So, what is KineticJS
  • Installation
  • Quick start – creating your first image editor
    • Organizing your stage, layers, groups, and shapes
    • Adding custom and ready-to-use shapes, images, and text to a layer
    • Dragging-and-dropping items with configurable constraints and bounds
    • Resizing, scaling, and rotating items
    • Cloning and removing items
    • Applying a filter to a selected image
    • Animating selected shapes
    • Cache nodes to improve performance
    • Optimizing for use on mobile devices (iOS, Android)
    • Saving a stage as an image
  • Top features you need to know about
    • Layering support
    • Standard and custom shapes
    • Styling
    • Selector support
    • Event-driven architecture, drag-and-drop
    • Filtering
    • Animation
    • Serialization/deserialization, saving a stage as an image
  • People and places you should get to know

“KineticJS is a JavaScript library that helps us simplify the development of interactive HTML5 applications. In this case interactive applications are different 2D applications such as games, image editors, interactive maps, cartoons, and more. From a technical point of view it is an extension to the HTML5 Canvas 2D context in the form of a JavaScript library.”

First off, this book is intended as a ‘starter’, so don’t expect a weighty tomb that covers everything. If you have a medium level of HTML5 Canvas, CSS and JavaScript knowledge then you shouldn’t have any trouble getting to grips with KineticJS.

The book starts off by explaining how to download and install KineticJS in to an empty HTML page. Then it jumps straight in to creating an image editor! I’m not sure this was the correct approach, but I guess the author was just trying to capture your interest early on (before you lost interest). I personally think it would have been better to build up to creating something like an image editor.

Anyway, the image editor is a reasonable application to use, as it allows the author to introduce various aspects of KineticJS using a real-world example. You can see from the contents list above what is covered in this example. The image editor takes us from page 7 through to page 24.

On page 25 the author goes in to a bit more depth on some of the topics you covered during the image editor build. See the contents list above to see what is covered. This continues through to page 48.

Occasionally the English grammar isn’t as clear to read as it could be, and I spotted a couple of instances where punctuation was missing, suggesting another round of proof-reading wouldn’t have gone a miss.

On the whole though it is a useful primer to anyone looking at using KineticJS for the first time, but a lot of the content is available for free from

Buy the book from here.

Posted in Books, Canvas | No Comments »

dat-gui: A Lightweight GUI for JavaScript Variables

November 19th, 2012 by Adrian


Recently I’ve started using this really cool lightweight GUI for allowing the easy tweaking of your JavaScript variables at runtime. It’s called dat-gui and it is available for download from the Chrome experiments website. The source code is hosted on Google Code and there is a handy tutorial showing how to use it here.

It makes it really easy to display sliders, colour pickers, checkboxes, buttons, drop-down menus etc in a nice clean panel (that can also be hidden) that update your JavaScript variables on-the-fly. It is also possible to create presets and save bespoke settings.

The interface looks something like this …

dat-gui Example

Here is my example of it in use.

Canvas Experiment 22

Posted in Canvas, Javascript | No Comments »

PxLoader – A JavaScript Preloader

November 1st, 2012 by Adrian

This morning I thought I’d blog about PxLoader. This is a handy JavaScript library for handling the loading of files (eg. Images, Sounds, etc) and monitoring their progress. It was created by Pixel Lab, the people who made the HTML5 version of Cut the Rope. It looks pretty straight forward to use and the website has some nice clear examples and documentation.

NOTE: This is different to a JavaScript module loader such as RequireJS, which handles the dependancies of JavaScript modules.

A good alternative to this is PreloadJS, which is part of the CreateJS suite of tools (also available separately).

Or you can make your own asset loader.

Posted in Canvas, CreateJS, EaselJS, HTML5, Javascript | No Comments »