How to create a random art using Canvas HTML5

Canvas Art

Introduction

Canvas is one of the most interesting additions to web pages by HTML5. In some ways, a canvas is like an <img> element. You can add a canvas like this:

<canvas id=”art-board” width=”920px” height=”320px”> </canvas>

And the browser allocates some space in the page for the canvas, with the width and height you have specified.

The HTML5 Canvas element is an HTML tag similar to <div>, <table> that allows user to draw graphics such as lines, squares, circles, etc. via scripting (usually, JavaScript) directly into an allocated canvas block element that appears on the web page. Since you can draw an image on a canvas, you can also to erase and re-draw all or a portion of the canvas image. There are a number of transformations and effects that you can apply to your canvas drawing.

Note: The <canvas> element is just a container for graphics. You need add a script to actually draw the graphics. We will show you how, don’t worry!

In much the same way that you might draw an image using a graphics program like Adobe Photoshop or paint, save it to a file, and load it onto a web page. With canvas you can automate through code and the drawing commands, and immediately see the results on the web page, without the need for an loading an external file. This capability allows you to do many sophisticated things that were once difficult or impossible to do, such as dynamically creating preview images.Continue Reading

Create Basic Animation Using Kinetic Sprite

In this post I will show you how to create a basic animation with Kinetic Sprite.  For the newbies, KineticJS is a 2D canvas library. Canvas is an HTML5 element used to draw pictures.

Kinetic Sprite is one the easiest way to show animation on a webpage.  The KineticJS Library is an easy-to-go API to the cumbersome canvas library and has definitely simplified the tasks.

The detailed documentation of Kineticjs is definitely a good source to pick up things. In this tutorial, we are going to do little animation. It will comprise of a simple circle moving around a rectangle. Although this simple looking example can enable you to the vast capabilities of the library.Continue Reading