Wednesday, January 5, 2011

A canvas globalCompositeOperation example



var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function draw(){
for (i=0;i<compositeTypes.length;i++){
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');

// draw rectangle
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

// set composite property
ctx.globalCompositeOperation = compositeTypes[i];

// draw circle
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}


Reference: developer.mozilla.org/samples/canvas-tutorial/canvas_composite

Sunday, January 2, 2011

Check if a browser supports HTML5

Check if a browser supports HTML5

HTML5 is a new way of developing interactive websites, HTML5 is still a emerging technology but we can already see lot of work being done and browsers supporting this new technology.

Anyone who will develop HTML5 will need to know how he can detect the browser is capable of supporting HTML5? or How he can detect which features the browser is compatible with.

The simplest way to do that is creating a canvas object using document.createElement method. After creating the object we can check if 2D context can be created, here is an example below:

<script type="text/javascript">
function supports_canvas() {
//Check if browser supports canvas
return !!document.createElement('canvas').getContext;
}
</script>

We have a open source solution as well, with help of which we can all the features supported by a browser, this is a javascript include file which can be obtained from Modernizr. We simply need to include this file in the head section, no call to any function, on its include it executes and initialize few boolean properties which can be accessed to check different HTML5 feature support.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>

The Modernizr.canvas property will return false if your browser does not support the HTML5 canvas API, following check will be used:
if (Modernizr.canvas) {
// let's perform some 2d graphics!
} else {
// no canvas support available!
}

Saturday, January 1, 2011

HTML5 Hello World Application

I consider HTML5 canvas the backbone of all the features available in HTML5, i recently got chance to work on a HTML5 application and really enjoyed learning new things and was really impressed with myself. Actually anyone who already knows some JavaScript and traditional HTML can kick start working on it.

For those who have just started working on it, i have created a Hello world application, this is a simple application, but will give overall view of how it works. Like in our graduation we always create a Hello world application to get start learning things, so here how it works:

First of all we should know whether the browser supports HTML5 canvas, for this you can view my post at Check if browser supports HTML.

I will use following method:
function supports_canvas() {
//Check if browser supports canvas
return !!document.createElement('canvas').getContext;
}


Next we need a Canvas element which supports 2D graphic drawings, it is the canvas on which we can draw different shapes like circle, rectangle, arcs, circle, etc also we can write text, and draw images from some source files.

This sample focuses on creating a canvas and writing hello world on it. For this i will create a DIV element in my document, than add a Canvas element in the DIV using JavaScript:

function initializeCanvas(containerid, canvasWidth, canvasHeight) {
var container = document.getElementById(containerid);
if ( supports_canvas() ) {
//Create canvas element
var canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
container.appendChild(canvas);
//Context of canvas for performing 2d graphics operations
context = canvas.getContext('2d');
return context;
} else {
container.innerHTML = 'This is a HTML5 app,
you need a HTML5 capable browser like Firefox,
Chrome, Safari or Internet Explorer 9.'

return null;
}
}


Here is the working sample: Sample Hello World