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”

Advertisements

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
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”