Home » Archive

Articles in the Design Category

CSS3, Design, HTML5, Javascript »

[18 Oct 2012 | No Comment | ]

We have seen image crop tool using server side script, below is HTML5 image crop tool to edit image on browser using HTML5 Canvas. So highlight of this script is, it just uses only HTML5 and js to crop and display the cropped image on Canvas.
No upload script is need to edit the original file, so no server overload.This cropping tool using HTML5 does not require any server-side script to crop. Just click and drag over the image to make selection and then press “crop Image” button to replicate crop on …

CSS3, Design, HTML5, Javascript »

[15 Oct 2012 | No Comment | ]

We have seen marching ants in most of the designing tools, like marquee tool or using any selection tools. we can see dotted lines on click and dragging our the canvas. Same marquee or marching ant effect we have recreated here using HTML5 and javascript.

HTML5 Canvas Mouse Events using javascript:
Before viewing the entire code for marching ants or marquee tool in HTML5. View this tutorial on how to use or interact with mouse events on html5 canvas element.
Entire Code for html5 Marching ants:
Image used for ant:      
Note: Right+click …

Design, HTML5, Javascript »

[3 Oct 2012 | No Comment | ]

HTML5 canvas element can be interacted with mouse to get input from user in game or web application. This simple article explains how to add mouse interaction events in HTML5 Canvas element. Since canvas element responds to javascript, we are going to use javascript to add mouse events. Tutorial Difficulty:

Basic users

Lets us see how to add the following mouse events in html5 canvas


HTML5 Canvas Mouse Events using javascript
Some of the mouse events in HTML5


onmousedown event in HTML5 Canvas:
onmousedown event fires when the user press the mouse button. This …

Design, HTML5 »

[17 Sep 2012 | No Comment | ]

HTML5 introduces many new tags, including several specific tags to better describing a document’s structure. Let us see simple html5 page structure and its elements
HTML5 doctype
<!DOCTYPE html>
HTML5 includes tags that break documents into the common sections and indicates the content contained in each section.
Some of the html5 tags are


The new HTML5 tags describe the types of content that they contain, and they help divide the document into logical sections.
Simple HTML5 page structure
Below is a simple html5 page structure with doctype defined.
<!DOCTYPE html>
<html lang=”en”>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”description” content=”" />
<meta …

Design, HTML5 »

[31 Aug 2012 | No Comment | ]

It is important for a game, web application of website to align itself or rearrage when the device orientation changes in iPad or iPhone devices. In this article we are going to discuss how to detect the change in device orientation using javascript and HTML5.
Using properties of the viewport meta tag is one of the way to access the change in device orientation. But we are going to handle using only javascript.

Other HTML 5 Tutorials

iPad Device orientation using HTML5 and javascript:
Code to handle device orientation.
<!doctype html>
<html lang=”en”>
<meta charset=”UTF-8″>
<title>iPad Device orientation</title>