1 function ProgressBar() {

     2     this.budget = 100;

     3     this.todo = 100;

     4     this.done = 100;

     5     this.color_done = "green";

     6     this.color_budget = "blue";

     7     this.color_todo = "#cccccc"; //  grey

     8     this.height = 16;

     9     this.middle = this.height / 2;

    10     this.radius = 4;

    11 }

    12 

    13 ProgressBar.prototype.draw_one_rect = function(ctx, pos, color, fill) {

    14     ctx.beginPath();

    15     ctx.lineWidth = 1;

    16     ctx.strokeStyle = color;

    17     if (fill) {

    18         ctx.fillStyle = color;

    19         ctx.fillRect(0, 0, pos, this.middle * 2);

    20     } else {

    21         ctx.lineWidth = 2;

    22         ctx.strokeStyle = "black";

    23         ctx.moveTo(pos, 0);

    24         ctx.lineTo(pos, this.middle * 2);

    25         ctx.stroke();

    26     }

    27 };

    28 

    29 ProgressBar.prototype.draw_one_circ = function(ctx, pos, color) {

    30     ctx.beginPath();

    31     ctx.lineWidth = 2;

    32     ctx.strokeStyle = color;

    33     ctx.moveTo(0, this.middle);

    34     ctx.lineTo(pos, this.middle);

    35     ctx.arc(pos, this.middle, this.radius, 0, Math.PI * 2, true);

    36     ctx.stroke();

    37 };

    38 

    39 ProgressBar.prototype.draw_circ = function(ctx) {

    40     this.draw_one_circ(ctx, this.budget, this.color_budget);

    41     this.draw_one_circ(ctx, this.todo, this.color_todo);

    42     this.draw_one_circ(ctx, this.done, this.color_done);

    43 };

    44 

    45 ProgressBar.prototype.draw_rect = function(ctx) {

    46     this.draw_one_rect(ctx, this.todo, this.color_todo, true);

    47     this.draw_one_rect(ctx, this.done, this.color_done, true);

    48     this.draw_one_rect(ctx, this.budget, this.color_budget, false);

    49 };

    50 

    51 function draw_progressbar(cid, done, todo, budget, color) {

    52     var canvas = document.getElementById(cid);

    53     if (canvas.getContext) {

    54         var ctx = canvas.getContext("2d");

    55         var bar = new ProgressBar();

    56         bar.budget = budget;

    57         bar.todo = todo;

    58         bar.done = done;

    59         bar.color_done = color;

    60         bar.draw_rect(ctx);

    61     }

    62 }

    63