Clik here to view.
Creating a simple pie chart with HTML5 Canvas
This week we take a look at how to use the HTML5 canvas element to create a simple pie chart. To begin, we need to define the element using the canvas tag. Please note the id, height, and width are...
View ArticleClik here to view.
Creating a simple pie chart with HTML5 Canvas Part 2
Last week we created a pie chart using HTML5’s Canvas element. This week we will utilize jQuery to add some simple functionality. For this exercise, we want to be able to visualize the exact values of...
View ArticleClik here to view.
Creating a simple pie chart with HTML5 Canvas Part 3
Over the last two weeks, we have created a simple pie chart and then added some functionality. This week we will focus on some design aspects to improve the presentation of the chart. While contrasting...
View ArticleClik here to view.
Multiple View Models with Knockout
In a recent project, I was required to create a form for user input in a web page. Each section of the form is distinct and serves a unique purpose, so I chose to use a tabbed layout . The order in...
View ArticleClik here to view.
Creating an HTML 5 Timer, part 1
This week, we will be creating a functional timer using HTML 5 timer elements. For visualization, we will use the canvas element to visualize time elapsed as well as an overlay that displays a message...
View ArticleClik here to view.
Creating an HTML5 Timer, part 2
Last week, we created a generic timer using canvas and the setInterval function. This week, we will add some audio elements and stylize the application using CSS3. This timer is going to have an...
View ArticleClik here to view.
A simple drawing grid with HTML 5
This week, we will build a simple drawing grid using HTML5 and javascript. In the coming weeks we will transform this simple example into a fully functional drawing application. For this demo, the...
View ArticleClik here to view.
A simple drawing grid with HTML5 part 2
Last week we created a full page drawing surface with HTML5 canvas. This week we will add a few simple controls to allow for the user to clear the surface, set drawing colors, and choose different...
View ArticleClik here to view.
A simple drawing grid with HTML5 part 3
This is a continuation of our simple drawing grid series. Last week, we ended up with a functional drawing grid with a few expected controls like setting pen size and pen color. While it was...
View ArticleClik here to view.
A simple drawing grid with HTML5 part 4
This week, we will complete the simple drawing grid by adding support for mobile browsers. Support for mobile browsers consists of enabling interaction with the canvas with touch events rather than the...
View Article