HTML5 Canvas - What's the simplest way to draw a line that gets thicker and thicker to the end?

Question

What's the simplest way to draw a line that gets thicker and thicker to the end? Like this:

And this is for a clock project so I want the line x and y points not to be constant, I mean that the line should spin around a point using sinus and cosinus no ctx.rotate only MATH.

Simply, how can I also make the line spin around the black spot?

Answer 1

For HTML5 canvas with its origin at top left, the general formulae for a point rotated clockwise from vertical are:

var x = cx + r * Math.sin(theta);
var y = cy - r * Math.cos(theta);

Where [cx, cy] is the center point of your clock, and theta is measured in radians.

For your clock handle, just use these formulae three (or four) times, depending on whether you want the handle to end at a point (ie a triangle) or at a line (ie a parallelogram).

Calculate theta based on the required time, and then for each point adjust it (and pick suitable r ) for the required shape.

See http://jsfiddle.net/alnitak/NgQWH/ for a demo