Windows 10 Progress widget with the HTML5 Canvas

I recently decided to take the plunged and updated from Windows 8 to Windows 10.  Wow! it seemed to take what felt like hours.  I was granted the privilege to see Microsoft’s new please wait progress tracker for quite sometime.  If you have not seen it; progress is measured through movement by using the perimeter of a circle.  As the progress moves from from zero, through to one-hundred percent the perimeter of the circle is filled, forming a simple and clean user interface.  This is the progress widget used during the upgrade:

Windows 10 Progress Widget

The mission of the posts is to explain how to replicate the above using HTML5’s canvas.

Continue reading “Windows 10 Progress widget with the HTML5 Canvas”


How to draw a Dartboard using HTML’s Canvas

This post will cover the steps required to draw a traditional Dartboard using HTML5’s canvas.  The final product produces the following rendered board.

Dartboard drawn using HTML5’s canvas

To tackle this task one’s thought process was to picture how one would draw a dartboard using layers.  In theory you would start by drawing the black circle that forms the base of the board.  Followed by the alternating black and while pie sections.  The double and treble arcs would then be placed accordingly, followed by the outer-bull and bulls-eye circles.  And finally, the wire-works between the pie sections and lettering on the outer ring.

Continue reading “How to draw a Dartboard using HTML’s Canvas”

Canvas Drag and Drop with Collision Detection

In this post I’ll cover the basics of implementing drag and drop with collision detection using the Canvas element and JavaScript. The end result will produce the following:

Drag and Drag shapes on the canvas

Each item on the canvas is represented by a rectangle.  When clicking inside the bounds of an rectangle the inner circle’s colour changes to grey to indicate the item is selected.  Release the button results in a mouse up event .  Between the mouse down and up events the item can be dragged and thus moved around the canvas.  When two objects collide they will be coloured red. This functionality has been implemented as follows. Continue reading “Canvas Drag and Drop with Collision Detection”

Great Little Computer!

A simple HTML5 Game tutorial – Part 3

Following on from Part 2 we have put in place the foundation of our game and have some ‘bad guys’ moving in a menacing manner.  We are close to having a game: if we could just shot the ‘bad guys’.  Reminding ourselves of the goals set out in Part 1 we need to achieve the following: Continue reading “A simple HTML5 Game tutorial – Part 3”

Keyboard with historical game keys in orange

A simple HTML5 Game tutorial – Part 2

Following on from Part 1 we have put in place the foundation of our game.  But, we can’t really call it a game as we have no interaction. Reminder ourselves of the goal set out in Part 1 we need to achieve the following:

In you want to have a peek at the result of following this post click here.

Continue reading “A simple HTML5 Game tutorial – Part 2”

A simple HTML5 Game tutorial – Part 1

I’ve always wanted to create a game. It seems the older I get the closer I get. This post is the first in a small series which walks you through the steps I followed to create a simple game. Here is a taster of the end result:

A simple game create using HTML's canvas and JavaScript
Screenshot of HTML5 game

Continue reading “A simple HTML5 Game tutorial – Part 1”

Raining google with HTML5’s Canvas

Following on from the Great Balls of Gravity post, I’ve used the code from the post and adjusted to animate Google’s logo.  Each letter within the famous name will free-fall from top, bounce at the base and then fall off the bottom and repeat. Continue reading “Raining google with HTML5’s Canvas”

Great Balls of Gravity – HTML5 Canvas

Continuing with the Physics posts my second post on the subject involves mimicking the gravity effect on a medicine, basket, football and tennis balls.   A working version can be viewed here. The completed project is depicted below:

Falling balls effect in HTML5's canvas

The example above uses the Canvas element which is available in most of the major browsers as part of HTML5. The mark up of the above follows: Continue reading “Great Balls of Gravity – HTML5 Canvas”

HTML5’s Canvas – A physics’ Race

Cars in motion HTML5I fancied stepping into the unknown with my next HTML5 and canvas project. I’ve always been fascinated by the laws of physics and the programmatic approach one would take to manage this within a software project. As my knowledge on this subject only extends to my education at school, I decided to attempt to carry out the basics of a car race animation using the basic equation for a particle in motion e.g. x = x0 + (v0 * t) + (1/2 * a * t^2). Continue reading “HTML5’s Canvas – A physics’ Race”

A progress bar using HTML5’s canvas

The default slider in HTML is rather basic and as of writing this post is only supported in Chrome – who knows why! The slider below is how Chrome renders the slider to screen:

A basic HTML5 slider control

Very basic indeed! In this point I have used HTML5’s canvas implementation to draw the following:

HTML5 slider control using Canvas Continue reading “A progress bar using HTML5’s canvas”