Unknown Kadath ( a blog about HTML5 )

CSS3 Series: Multiple Columns

James Litten — Sat, 21 Aug 2010 16:32:37 +0000

Even though this wonderful feature has been around for five years, it has yet to be implemented consistently across the major browsers. Hopefully, this will change soon.
If you know a reason why this is so, please leave a comment. Thanks.

The specification for CSS Multi-column Layout has 10 properties for CSS Multiple Columns.
They are pretty self explanatory except for maybe ‘rule’ which in this context means a vertical divider between the columns that behaves like a CSS border.

column-width
column-count
columns (This is shorthand that can set either or both ‘width’ and ‘count’)
column-gap
column-rule
column-rule-width
column-rule-style
column-rule-color
column-fill (Balances columns height)

column-span (Allows for titles or headings to span across multiple or all columns)

Browser Support

Let’s look at the current implementations (as of August, 2010)

Mozilla (Firefox 3.6)
10 standard properties are supported plus an extra one created by Mozilla
-moz-column-height

-moz-column-width
-moz-column-count
-moz-columns
-moz-column-gap
-moz-column-rule
-moz-column-rule-width
-moz-column-rule-style
-moz-column-rule-color
-moz-column-fill
-moz-column-span

Webkit (Chrome 6, Safari 5)
10 standard properties are supported
-webkit-column-width
-webkit-column-count
-webkit-columns
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-fill
-webkit-column-span

Opera
Not Supported

IE
Not Supported

Webkit and Mozilla Render differently

To further complicate the use of CSS3 multiple columns, even simple examples are rendered differently by Webkit and Mozilla.

If you set both column-width and column-count, visitors with a Webkit browser see a very different result than visitors with a Mozilla browser.
For example, here are images of the following code in Firefox 3.6 and Chrome 6

-moz-column-count: 3; -moz-column-width: 45px; -webkit-column-count: 3; -webkit-column-width: 45px;

While Chrome limits the column width to what it is set at (45px) Firefox limits the column width based on the column number. If you allow Firefox to automatically set the column number, it will then limit the column width to what it is set at (45px).

It may be quite awhile before the average webmaster uses CSS3 multiple columns.

Some sites for further reading.
W3C Specification http://www.w3.org/TR/css3-multicol/
Demo page with source code. http://www.quirksmode.org/css/multicolumn.html
Mozilla Dev Page https://developer.mozilla.org/en/CSS3_Columns

Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts

James Litten — Wed, 04 Aug 2010 19:57:19 +0000

In this post we will create a simple pie chart that is easy to feed data to.

This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6).






Canvas Test

You can copy this code and paste it into a new file called something like simplepie.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the pie chart.

Here is our canvas in action...

The algorithm for making a simple pie chart is something like this...

Get the data that is being represented by the chart (it must be numerical)
Calculate the total by adding all of the data together.
Calculate the amount of pie for each piece of data by dividing it by the total.
Multiply 2*pi radians by the amount of pie to get the length of the arc for that piece of pie.
Draw the resulting arcs at a distance of r (the radius) from the center starting each arc at either 0 (the first arc) or from the end of the last drawn arc.
Each arc has a line from its beginning and its ending to the center of the circle that is of length r

Since the arc() method of the 2d canvas context is based on paths, this is real easy to code.

arc(x, y, radius, startAngle, endAngle, anticlockwise)
This method takes five parameters: x and y are the coordinates of the circle's center. Radius is self explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians. The starting and closing angle are measured from the x axis. The anticlockwise parameter is a Boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.
Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: var radians = (Math.PI/180)*degrees.
https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes#Arcs

Step 1 of the algorithm is accomplished by this loop in our plotData() function

for (var i = 0; i < myData.length; i++) {

Where myData[i] represents the data from the hard coded global variable

var myData = [10,30,20,60,40];

This could easily be from a database, table data or from input textboxes filled in by the visitor.

Step 2 of the algorithm is accomplished by our getTotal() function which loops through our data and adds it all together returning our total. It also verifies that our data is numeric giving it a value of zero if it is not.

function getTotal(){
  var myTotal = 0;  
  for (var j = 0; j < myData.length; j++) {
    myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
  }
  return myTotal;
}

Step 3 of the algorithm is accomplished by the highlighted part of this line in our plotData() function.

ctx.arc(200,150,150,lastend,lastend+
       (Math.PI*2*(myData[i]/myTotal)),false);

Step 4 of the algorithm is accomplished by the highlighted part of this line in our plotData() function.

ctx.arc(200,150,150,lastend,lastend+
       (Math.PI*2*(myData[i]/myTotal)),false);

Step 5 of the algorithm is accomplished in our plotData() function by using the variable lastend to start at 0 radians and then keep track of where the previous arc ended.

lastend += Math.PI*2*(myData[i]/myTotal);

Step 6 of the algorithm is accomplished in our plotData() function by starting our path at the center of the circle

    ctx.beginPath();
    ctx.moveTo(200,150);

then we draw our arc which extends our path from the center to the start of our arc

    ctx.arc(200,150,150,lastend,lastend+
       (Math.PI*2*(myData[i]/myTotal)),false);

then we extend our path back to the center of our circle and fill in the shape (our pie slice)

    ctx.lineTo(200,150);
    ctx.fill();

Since we use an array of color values to make sure that all the pie slices are easy to see,

    var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];

we can create a legend saying what each color represents.

█	10
█	30
█	20
█	60
█	40

In our next post, we'll look at making our pie fancy with labels and maybe a few animations.

This is post 4 of a multipart series of posts.

Graphing Data in the HTML5 Canvas Element Part I

Graphing Data in the HTML5 Canvas Element Part II

Graphing Data in the HTML5 Canvas Element Part III

HTML5 Web Storage, Using localStorage and sessionStorage Objects

James Litten — Tue, 03 Aug 2010 21:17:33 +0000

Web storage started as part of the HTML5 spec for storing key-value pair data in web clients. It now has its own spec. There are other plans for storing databases that are structured and can be queried using SQL which are handled in a separate spec .

Seeing the need for storing more key-value pair data on the web client than can currently be stored in a cookie, all major web browsers quickly adopted support for a storage object that can hold up to 5MB of data that persists until the web client’s cache is cleared or the storage object is programatically cleared, or in the case of sessionStorage, the browser window (tab) is closed. This quick and relatively consistent adoption by web browsers is a rare treat for web developers.

IMPORTANT: Do not store sensitive data in web storage. When I do penetration testing, locally stored data is one of the first things that I look at.

IMPORTANT: All data in web storage is stored as strings. If you want to store an object, you should use JSON and call stringify() on it before storing it and parse() on it after retrieving it.

There are two flavors of the storage object that we will be looking at.

sessionStorage object

The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data.

localStorage object

Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Data stored in the localStorage object is accessible only from the domain that initially stored the data.

Both localStorage and sessionStorage objects have the same interface, differing only in how the data stored by them persists and who can access the data.

The setItem method

setItem( key, value)
sessionStorage.setItem("name", "Sam")
localStorage.setItem("name", "Sam")

or the property using an expando
sessionStorage.name("Sam")
localStorage.name("Sam")

The getItem method

getItem(key)
name = sessionStorage.getItem("name")
name = localStorage.getItem("name")

or the property using an expando
name = sessionStorage.name
name = localStorage.name

The removeItem method

removeItem(key)
name = sessionStorage.removeItem("name")
name = localStorage.removeItem("name")

The property using an expando required an extra ‘delete’ keyword and is no longer in the spec.

The clear method

The clear() method causes the list associated with the object to be emptied of all key/value pairs

sessionStorage.clear
localStorage.clear

The key and length properties

Key and length are useful for looping through all of the key value pairs, especially if you don’t know what they all are.

Key is an index of the key values ( key(0), key(1), key(2) …) Length is the number of keys.

for (var i=0, len = sessionStorage.length; i  <  len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

Storage Event

The storage event is fired on the window object whenever something changes in storage. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.

The storage event has the following attributes

key the named key that was added, removed, or modified
oldValue the previous value (now overwritten), or null if a new item was added
newValue any the new value, or null if an item was removed
url the page which called a method that triggered this change
storageArea represents the Storage object that was affected.

Some online DEMOs

HTML5 Demos: Storage
Web Storage Example

Browser Compatibility (as of August, 2010)

Internet Explorer 8
Firefox 3.5 
Safari 4
Google Chrome 5
Opera 10.50

Only Opera supports the Storage event's attributes but I've verified that the storage event can be triggered on Chrome 5 and Firefox 3.6 though, the attributes for the event are all set to undefined.

Playing With CSS Transitions On Firefox 4 Beta 2

James Litten — Thu, 29 Jul 2010 18:31:26 +0000

I saw the recent announcement by Paul Rouget that Firefox 4 beta 2 has support for CSS transitions and I thought it would be fun to play with it.

Here is a demo with complete source code where I chained together a bunch of CSS transitions using the transitionend event to trigger the transitions sequentially.

DEMO CSS transitions in Firefox 4 beta 2

The demo requires Firefox 4 beta 2

I found that the transitionend event was triggered more often then I expected and had to remove listeners for the event when I was done with them or they sometimes triggered again. I need to learn more about what triggers them.

Have fun with the code as that is the best way to learn.

Using Multiple HTML5 Canvases as Layers

James Litten — Mon, 26 Jul 2010 21:28:25 +0000

DEMO Here’s our finished canvas with full source code.

The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context…

There is only one CanvasRenderingContext2D object per canvas, so calling the getContext() method with the 2d argument a second time must return the same object.
http://dev.w3.org/html5/2dcontext/#conformance-requirements

Having just one 2d context means that you have to keep track of everything on the context even if you only want to change part of the canvas.

An example of using layers is animation. When I was a child, I loved making animated cartoons and I learned that if I painted them on clear plastic sheets I could stack the sheets and only redraw the parts that moved. I could make an elaborate background and use it over and over instead of redrawing it for every frame. The same principle applies here to our canvases.

In this example, our three canvases have transparent areas that allow you to see what is on the canvas beneath each.

First, let’s look at our three canvases separately and then we’ll stack them on top of each other.

Our bottom layer


function draw1() {
  ctx1.clearRect(0, 0, WIDTH, HEIGHT);
  ctx1.fillStyle = "#FAF7F8";
  ctx1.beginPath();
  ctx1.rect(0,0,WIDTH,HEIGHT);
  ctx1.closePath();
  ctx1.fill();
  ctx1.fillStyle = "#444444";
  ctx1.beginPath();
  ctx1.arc(x, y, 10, 0, Math.PI*2, true);
  ctx1.closePath();
  ctx1.fill();

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}

The code for this animation is fully explained here. Simple Animation in the HTML5 Canvas Element

Our middle layer


function draw2() {
  ctx2.clearRect(0, 0, WIDTH, HEIGHT);
  ctx2.drawImage(city, 0, 0); 
}

We are simply drawing city.png http://html5.litten.com/layers/city.png to the canvas. The sky in this image is transparent.

Our top layer


function draw3() {
  ctx3.clearRect(0, 0, WIDTH, HEIGHT);
  ctx3.fillStyle = "#444444";
  ctx3.save();
  ctx3.translate(200,200);
  ctx3.rotate(x/20); 
  ctx3.fillRect(-15, -15, 30, 30);  
  ctx3.restore();
}

Here we transform the canvas’s coordinate system and rotate the square based on the global variable x which is used in layer 1 also. For more information on transforms with save() and restore() go here Understanding save() and restore() for the Canvas Context

Now to stack them

We use CSS to set all the canvases to an absolute position of (0,0) inside our parent DIV tag.


    position:absolute;
    left:0px;
    top:0px;

We also use CSS to set the z-index of our canvases. The z-index property specifies the stack order of an element. Items with lower z-index values go behind items with higher z-index values.


Bottom layer
    canvas id="layer1" 
    style="z-index: 1;
    
Middle layer    
    canvas id="layer2" 
    style="z-index: 2;

Top Layer    
    canvas id="layer3" 
    style="z-index: 3;

DEMO Here's our finished canvas with full source code.

Now it doesn't matter that a canvas can only have one 2d context because we can just make multiple canvases and stack them.

If you have a question that you do not want published as a public comment, then use my contact page.

Have fun with the code as that is the easiest way to learn.

IE Compatible Canvas Drag and Drop With jQuery and ExCanvas

James Litten — Tue, 20 Jul 2010 18:25:01 +0000

This post is about making drag and drop work on a canvas in Internet Explorer versions 6, 7 and 8 . The details of how to drag and drop on the canvas can be found in this previous post. How to Drag and Drop on an HTML5 Canvas

To modify our canvas in order to make it work in IE we need to …

Use ExplorerCanvas to make IE’s VML act like a canvas like object

Use jQuery to manage our events and make them compatible with IE

Use jQuery to calculate our canvas’ offsets

Move our call to init() to the body.onload event

Sounds like a lot but it really isn’t.

Here’s the DEMO page that should work in all current browsers including IE. The full source code for the page is listed below the canvas.

Use ExplorerCanvas to make IE’s VML act like a canvas like object

In our we add a conditional reference to Google’s Explorer Canvas javascript framework so that it loads if the visitor is using IE.

The file excanvas.js can be downloaded from here…

http://code.google.com/p/explorercanvas/downloads/list

Use jQuery to manage our events and make them compatible with IE

The jQuery framework does a great job of handling events across browsers. It is the main reason that I have used jQuery in my own projects. You do not even have to download it as it is hosted by Google at.
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
So simply adding a reference to it in your is enough to use it.

If you want to have it on your server, you can download it from here.
http://jquery.com/

Setting our event listener is a little different but we still use the same functions that we wrote in the original post How to Drag and Drop on an HTML5 Canvas.


 $("canvas").mousedown(function myDown(e){
 var position = $("canvas").position();
 if (e.clientX < x + 15 + position.left && e.clientX > x - 15 + 
  position.left && e.clientY < y + 15 + position.top && 
  e.clientY > y -15 + position.top){
    x = e.clientX;
    y = e.clientY;
    dragok = true;
    $("canvas").mousemove(function myMove(e){
       if (dragok){
        x = e.clientX - position.left;
        y = e.clientY - position.top;
       }
});
 }
}); 
 $("canvas").mouseup(function myUp(e){
  dragok = false;
  $("canvas").mousemove(null);
});

Notice that we removed our traditional event listeners and wrapped the functions our events trigger with the jQuery event listeners


$("canvas").mousedown()
$("canvas").mouseup()
$("canvas").mousemove()

These are shorthand versions of the jQuery bind method. The longhand looks like this.


$("canvas").bind(mousemove, mymove())

The shorthand versions work fine and are easier to read.

Use jQuery to calculate our canvas’ offsets

Sometimes I feel as though offsets are the bane of my existence. jQuery makes them consistent across browsers with the position method.
The position method returns an object containing the position of the top-left corner of the element relative to the top-left corner of the first positioned parent of the element.
In our myDown(e) function we get our canvas’ offsets with regard to their parent.


var position = $("canvas").position();

Now we can use position.left and position.top as our offsets in calculating where our mouse is on the canvas.


       if (dragok){
        x = e.clientX - position.left;
        y = e.clientY - position.top;
       }

Move our call to init() to the body.onload event

That’s all we have left to do.

This makes sure that init() isn’t called until the

That’s it. Here is the full source code of our modified canvas as well as a DEMO.

If you have a question that you do not want published as a public comment, then use my contact page.

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

James Litten — Fri, 16 Jul 2010 17:58:56 +0000

In this example we will look at slicing images with the drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to slice out and draw individual sprites.

I made this example as simple as possible to keep from cluttering up the key concepts of slicing and drawing pieces of images on the canvas. It only moves in one direction by pressing the right arrow key on your keyboard.

Contents

What you need to run this
Here’s the canvas (you need an HTML5 friendly browser to view this)
Here’s the code
Making the images
Slicing and moving the images
Where to go from here

What you need to run this

An HTML5 friendly browser. I use Google Chrome and Firefox 3.6 .
A text editor like Notepad. I use PSPad
Right click and save the three images below to the same directory that you put your HTML page in.

This looks empty but it is white stars on a transparent background so right click and you can save it.

sky.png

city.png

ufo.png

Here’s the canvas (you need an HTML5 friendly browser to view this)

Press the right arrow key on your keyboard to move the spaceship. We only have it coded for one key to keep it simple. Once you understand how it works, it is easy to add movement in other directions.

Here's the code






Canvas Test

You can copy this code and paste it into a new file called something like slices.html and save it in the same directory with your 3 images for the sky, city and UFO (they must be in the same directory). When you open it with an HTML5 friendly browser like Firefox 3.6 it will display the canvas.

Making the images

I spent maybe a half an hour making these images in Photoshop. They are very simple to illustrate the key concepts of this example. Given a few hours, an artist could really jazz these images up and make them look like a real video game.

The sky background
This image is two identical 300x300 images attached horizontally to make a single 600x300 image that we will move across the canvas by selecting 300X300 slices of it. Once we get to the end of the image (moving right) we reset the image back to the beginning which is the same because the leftmost 300x300 slice is identical to the rightmost 300x300 slice.

The city background
The city background is the same size as the sky background and is moved in the same manner of 300x300 slices. By putting it on top of the sky image and scrolling it slightly faster than the sky image we create the parallax scrolling effect.

Spaceship spritemap
The spritemap consists of three 32x32 images each a slightly modified version of the spaceship (different color lights). We display the spaceship one 32x32 slice at a time to create the magical illusion of animation.

Slicing and moving the images

We have an event listener listening for keypresses on the keyboard.


window.addEventListener('keydown',doKeyDown,true);

When a key is pressed it calls doKeyDown() and checks to see if the right arrow key was pressed. If it was it sets the variables for slicing our images.


function doKeyDown(evt){
  switch (evt.keyCode) {
    case 39:  /* Right arrow was pressed */
      if ((skyx + skydx) < (300 - skydx)){ 
        skyx += skydx; }
      else {
        skyx = 0;
      }
      if ((cityx + citydx) < (300 - citydx)){ 
        cityx += citydx; }
      else {
        cityx = 0;
      } 
      if (ufosprite < 64){ 
        ufosprite += 32; }
      else {
        ufosprite = 0 ;
      }       
  }
}

First we check if our sky background slice is at the right end of the image and if it is, we set it back to skyx = 0 which is the leftmost slice. If not then we increment it by skydx which is the amount that we move the sky for each keypress (must be lower than citydx to achieve the parallax effect).
Then we do the same for our city background.
Next we increment our slicing variable for the UFO to slice the next 32x32 sprite out of our UFO spritemap image.

Now that we have our variables set to new values, let's go to our draw() function (which runs every 10 milliseconds) and clear the canvas and redraw everything with our new values.


function draw() {
  clear();
  ctx.fillStyle = "black";
  rect(0,0,WIDTH,HEIGHT);
  ctx.drawImage(sky, skyx, 0, 300, 300, 0, 0, 300, 300);  
  ctx.drawImage(city, cityx, 0, 300, 300, 0, 0, 300, 300);  
  ctx.drawImage(ufo, ufosprite, 0, 32, 32, ufox, ufoy, 32, 32); 
}

First we clear the canvas and paint it black so our white stars will show.


  clear();
  ctx.fillStyle = "black";
  rect(0,0,WIDTH,HEIGHT);

Next we meet the wonderful drawImage() function. Here is the syntax and a picture from the W3C (http://dev.w3.org/html5/2dcontext/#images). I can't say it any clearer.

context . drawImage(image, dx, dy)
context . drawImage(image, dx, dy, dw, dh)
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Draws the given image onto the canvas. The arguments are interpreted as follows:

In the city and sky backgrounds the only variable that we change is the sx coordinate of where our slice begins. The slices are always 300x300 and are always drawn at (0,0) on our canvas.


  ctx.drawImage(sky, skyx, 0, 300, 300, 0, 0, 300, 300);  
  ctx.drawImage(city, cityx, 0, 300, 300, 0, 0, 300, 300);

The spaceship also only changes the sx coordinate to slice the 32x32 sprite that we want to draw and is positioned on the canvas by ufox and ufoy which are always (150,250).


  ctx.drawImage(ufo, ufosprite, 0, 32, 32, ufox, ufoy, 32, 32);

Where to go from here

You can now jazz up your canvas. Here are some suggestions.

Add movement in more directions.

Make better graphics.

Have the UFO shoot lasers or flames or peanut butter.

Have fun with the code as that is the easiest way to learn.

If you have a question that you do not want published as a public comment, then use my contact page.

Graphing Data in the HTML5 Canvas Element Part III

James Litten — Thu, 15 Jul 2010 14:22:12 +0000

This is post 3 of a multipart series of posts. All of the code to try this example for yourself is included here but much of it is explained in the previous posts. The first and second parts can be found here.

Graphing Data in the HTML5 Canvas Element Part I

Graphing Data in the HTML5 Canvas Element Part II

In this post we will create bars on the graph by drawing rectangles whose size and position are based on the data that we are graphing. We will also increase the size of our graph area so our bars aren’t all scrunched together.

This will allow us to go from this

To this

This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6).






Canvas Test

You can copy this code and paste it into a new file called something like simplegraph3.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the graph.

Again our data will be 7 days of high temperatures.

Day	Temperature
1	80
2	95
3	75
4	78
5	92
6	95
7	79

We don’t need to change much in order to convert the line graph that we made in our last post to a bar graph.

First, since our bars are going to be 10 pixels wide we add 70 pixels (we are going to draw 7 bars) to our graphWIDTH variable and our canvas WIDTH variable. We also increase the width attribute of our


var WIDTH = 310;
var graphWIDTH = 250;

Now we need to change our plotdata() function. Here is the new version for bars.


function plotdata(){
ctx.fillStyle = "black";
j = 0;
for (var i in temps){
rect(((j+1)*30) + padding,(graphHEIGHT + padding) -(temps[j]),10,
  (temps[j]));
j++;
}
}

We set the fillstyle of our bars to ‘black’ and then we loop through our array of temperatures and use those values to create our rectangles.


rect(((j+1)*30) + padding,(graphHEIGHT + padding) -(temps[j]),10,
  (temps[j]));

We use ((j+1)*30) + padding for our x coordinate. Adding one to j moves our first bar 30 pixels from the edge of the graph. The y coordinate is determined by the temperature data. The width is hard coded to 10 pixels and the height is determined by our temperature data.

It is very easy to load an array with data from pretty much any data source. As long as the graph is big enough, you can read and graph any one dimensional data set with this technique.

CSS 3.0 Series: The radial-gradient Object

James Litten — Wed, 14 Jul 2010 13:25:37 +0000

Radial gradiants are on the cutting edge of CSS . We’re going to be looking at some examples of their use and their current capabilities.

In the previous post in this series we looked at linear gradients. The WebKit implementation of the radial gradient is just an extension of their linear gradient function while Mozilla and W3C have opted to make the radial gradient have its own function.

Implementations and their Differences.

W3C syntax explanation here  
radial-gradient([ || ,]?
 [ || ,]? , 
[, ]*)

The W3C spec for the radial-gradient object is sufficiently
 complete for almost all tasks. It has the capability to create
 elliptical gradiants, and it is easy to define an angle,
 beginning and end of the line that defines the gradient.

Mozilla syntax explanation here 
-moz-radial-gradient( [ || ,]?
 [ || ,]? , 
 [, ]* )

The Mozilla implementation is fairly new so it is identical to
 the W3C spec. Firefox 3.6 and Minefield render all of the
 examples below very well.

WebKit syntax explanation here 
-webkit-gradient(,  [, ]?,
  [, ]? [, ]*)

Being pioneers and having early adoption of gradients,
 the WebKit implementation uses the same format for both
 linear and radial gradients. Unfortunately, this does not
 include the ability to do elliptical gradients. You specify
 a start circle and end circle in absolute pixel units, and
 then specify color stops at percentages between those
 two circles. 

Microsoft syntax explanation here
NONE
The Microsoft implementation of CSS gradients is limited to
 linear gradients that are either horizontal or vertical. No
 radial gradients. I've noticed that their linear gradient does
 not work in the IE9 platform preview (works in IE5 through IE8)
 so I wonder what they are up to.

IMPORTANT : Gradients can be used in any property that accepts images.

Examples of radial gradiants applied to

 tags.

Two colors #ffffff #F56991 from the center circular gradiant.

Here’s the code…

Two colors #ffffff #F56991 from (175,75) circular gradiant.

Here’s the code…

Three colors #ffffff #F56991 #8A2624 from (175,75) circular gradiant.

Here’s the code…

Three colors #ffffff #F56991 #8A2624 from (195,60) elliptical gradiant.

Here’s the code…

This only works for the Mozilla implementation

Looking at these examples, there really isn’t much more to say than CSS radial gradients are not ready for primetime yet but they sure look nice.

Make a Maze Game on an HTML5 Canvas

James Litten — Sun, 11 Jul 2010 17:26:16 +0000

One of the best ways to learn how to program in any language is to make a game and then change the code to create different variations on the game. I learned C++ long ago by creating an elevator simulation game (thanks Tom Swan). It’s fun and it is the closest you can come to ‘instant gratification’ in programming.

Let’s make a maze game in an HTML5 canvas. In this post Moving Shapes on the HTML5 Canvas With the Keyboard we learned to use keyboard input to move a shape around the canvas. All we need to do to make our game is

1. Add an image of the maze to the canvas.

2. Add collision detection code so we know if our shape hits a border in the maze.

Contents

What you need to run this
Here’s the game (you need an HTML5 friendly browser to view this)
Here’s the code
Getting a maze image
Putting the maze image on your canvas
Adding collision detection
Where to go from here

What you need to run this

An HTML5 friendly browser. I use Google Chrome and Firefox 3.6 .
A text editor like Notepad. I use PSPad
A web server to upload your page to.
All the code for the maze game is in this post but it does build on the post Moving Shapes on the HTML5 Canvas With the Keyboard which you can refer to if you don’t understand the keyboard input routines.

This example can not be run from your desktop because it uses the getImageData() method of the 2d context for collision detection. For security reasons it can only be run from a page served to the browser by a server. See the comments to the post here for more info .

Here’s the game (you need an HTML5 friendly browser to view this)

Here is our canvas in action. Since this post is longer than one page, pushing the arrow keys will scroll the page in addition to moving the square around. I substituted the arrow key keycodes with new keycodes.

Press w to move up (keycode 87)
Press s to move down (keycode 83)
Press a to move left (keycode 65)
Press d to move right (keycode 68)

Here's the code






Canvas Maze Game

You can copy this code and paste it into a new file called something like maze.html and upload it to a webserver along with your maze image (they must be in the same directory). When you open it with an HTML5 friendly browser like Firefox 3.6 it will display the canvas with the maze game on it.

Getting a maze image

There is a free tool at http://hereandabove.com/maze/mazeorig.form.html that makes awesome maze images which you can right click and save in order to use them in your canvas page. Make sure that you set the Path width (in pixels) to be wider than your square plus whatever you use for dx and dy or else your square will always be colliding with a wall and won't go anywhere.

Here is the image that I used. You can right click it and save it if you don't want to make your own right now.

Putting the maze image on your canvas

After getting a maze image, we need to add it to our canvas. Be sure that you upload the image into the same directory as your HTML file.

Make the canvas size the same size as the size of the image. My image is 482x482.

This makes it easier because the coordinate system of the canvas will match the coordinate system of the maze image.

Add a variable to hold our image.

var img = new Image();

We put our image into our new variable in our init() function which is the function that we call to start everything.


function init() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  img.src = "maze.gif"; 
  return setInterval(draw, 10);
}

Then we draw our image onto the canvas in our clear() function.


function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  ctx.drawImage(img, 0, 0);
}

This way when we call clear, only our little square is erased and we can look at the area of the maze where the square would go next and easily see if it is going to collide with a border.

The drawImage method of the 2d context has three arguments

 ctx.drawImage(variable holding the image, X coordinate of the top left of the image,  Y coordinate of the top left of the image)

When we call it, we put our maze image on the canvas with the top left corner at (0,0) which is the top left corner of our canvas also. Now when we look at a pixel like (100,100) on our canvas, we are also looking at pixel (100,100) on our image.

Adding collision detection

Now all we need to do is check to make sure that we only move the square if the movement will not cause it to cross over one of the borders in the maze. Here's some pseudocode.


User presses an arrow key

Calculate where that would move the square to.

Look at all of the pixels on the maze image that the square will cover
in its new position (our square is 15x15 so we look at 225 pixels)

Are any of the pixels black (the maze is white with black borders. 
If a pixel is black that means the square would collide with a border)

YES: then do not move

NO: then move

Our collision detection needs to occur when a user presses an arrow key to move the square.

Let's look at what happens when the up arrow is pressed.


function doKeyDown(evt){
  switch (evt.keyCode) {
    case 38:  /* Up arrow was pressed */
       if (y - dy > 0){ 
        y -= dy;
        clear();
        checkcollision();
        if (collision == 1){
          y += dy;
          collision = 0;
        } 
      }

When a key is pressed on the keyboard, our event listener calls doKeyDown() which then checks to see if an arrow key was pressed. If the keyCode of the event is 38 then that means the up arrow key was pushed down.

First we check to make sure that the requested move won't move the square off of the canvas (y < 0).


  		if (y - dy > 0){

In order to move the square up we need to decrease the value of y by dy (dy and dx are set to the number of pixels that we move the square with each keypress. We are using dy = 5 and dx = 5 in our example).


        y -= dy;

Now we need to check if the new y value causes our square to cross over a border in the maze.

First we call our clear() function which redraws our canvas with the maze picture but does not draw our square.


function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  ctx.drawImage(img, 0, 0);
}

This allows us to look at the pixels on the maze image where our square wants to move to. Now we can check if there is a collision between the square and any of the borders of the maze.

Here's our checkcollision() function.


function checkcollision() {
  var imgd = ctx.getImageData(x, y, 15, 15);
  var pix = imgd.data;
  for (var i = 0; n = pix.length, i < n; i += 4) {
  if (pix[i] == 0) {
      collision = 1;
    }
  }
}

We get the image data from a square at (x, y, 15, 15) which is the 15x15 square area that our square will cover when we draw it. Then we load that data into a one dimensional array pix[].


  var imgd = ctx.getImageData(x, y, 15, 15);
  var pix = imgd.data;

This array has four values for each pixel in our 15x15 area. The values are
RED value
GREEN value
BLUE value
ALPHA value

A white pixel with no transparency looks like this
255
255
255
255

A black pixel with no transparency looks like this
0
0
0
255

4 values X 15 pixels X 15 pixels = 900 values in our array but since we are looking for either black or white we can simply look at only the RED value of each pixel which means we compare 225 values instead of 900. If the pixel is black RED is 0 and if the pixel is white RED is 255 so we look at every fourth value in the array and check to see if it is 0 (for black). If it is, we set the variable collision = 1.


  for (var i = 0; n = pix.length, i < n; i += 4) {
  if (pix[i] == 0) {
      collision = 1;
    }
  }

Now we are back in our keydown code for the up arrow where we check for the collision variable being set to 1 and if it is we undo the change to y and set the collision variable back to 0. Y remains unchanged and the next time the draw() function is called (it is called once every 10 milliseconds) it will not move the square up.


        if (collision == 1){
          y += dy;
          collision = 0;

Where to go from here

You can now jazz up your maze game. Here are some suggestions.

Add a timer display that counts down and the player must solve the maze before time runs out.

Use the timer to keep score so players can see who is the fastest.

Add sound effects. BEEP when the player hits a border or a fanfare when they win.

Add more mazes. Make ten mazes that are progressively more difficult and when the player finishes one, start the next one.

You can use any black and white image. Make a finger numbing spiral maze.

Make a trainer to help disabled people learn to use a neural impulse actuator to operate a computer.

Have fun with the code as that is the easiest way to learn.

If you have a question that you do not want published as a public comment, then use my contact page.

Unknown Kadath ( a blog about HTML5 )

CSS3 Series: Multiple Columns

Browser Support

Webkit and Mozilla Render differently

Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts

HTML5 Web Storage, Using localStorage and sessionStorage Objects

sessionStorage object

localStorage object

The setItem method

The getItem method

The removeItem method

The clear method

The key and length properties

Storage Event

Some online DEMOs

Browser Compatibility (as of August, 2010)

Further Reading

Playing With CSS Transitions On Firefox 4 Beta 2

Using Multiple HTML5 Canvases as Layers

Now to stack them

IE Compatible Canvas Drag and Drop With jQuery and ExCanvas

To modify our canvas in order to make it work in IE we need to …

Use ExplorerCanvas to make IE’s VML act like a canvas like object

Use jQuery to manage our events and make them compatible with IE

Use jQuery to calculate our canvas’ offsets

Move our call to init() to the body.onload event

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

What you need to run this

Here’s the canvas (you need an HTML5 friendly browser to view this)

Here's the code

Making the images

Slicing and moving the images

Where to go from here

Graphing Data in the HTML5 Canvas Element Part III

CSS 3.0 Series: The radial-gradient Object

Make a Maze Game on an HTML5 Canvas

What you need to run this

Here’s the game (you need an HTML5 friendly browser to view this)

Here's the code

Getting a maze image

Putting the maze image on your canvas

Adding collision detection

Where to go from here