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.

Full post here…

Advertisements

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.

Full post here…

At first, I had a hard time grasping the purpose and use of the save() and restore() methods of the canvas’ 2d context. It’s really very simple and here are some examples that can help you understand it better.

Full post here …

Most everyone agrees that a gradient background softens web pages and areas of web pages in a pleasing way. Many webmasters use a gradient somewhere on their website. This makes a CSS solution a good candidate to be adopted into web standards and used by all major browsers.

Full post here …

We’ll take a look at using input from the mouse. With a few simple calculations, you can drag and drop shapes on the canvas with your mouse.
Full post here …

The border-radius CSS properties can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

We’ll be working with code for three different implementations of the border-radius properties. Soon all browsers will use the CSS3 recommended format but for now they still use these different versions and you must put them all in your code. They are…

See the full post here…

.

This is post 2 of a multipart series of posts. The first part can be found here…
http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-i/

In this post we will do the following.

  • Move the graph to the center of a larger canvas
  • Add a meaningful background
  • Add labels to the x and y axes

This will allow us to go from this

To this

See the full post here…