javascript new object
 

так работает мой прогресбар
но при создании нового мне приходится делать копипаст,

var canvas3 = document.getElementById("canvas-3");
var ctx3 = canvas3.getContext('2d');
var color = '#2af';
var width = /*canvas.width*/ 100;
canvas3.height = /*width*/ 100;
var height = /*canvas.height*/ 100;
var percent_3 = 9.5;
var percent3 = percent_3 *10;
var counter = 0;


function baseCir3(){
ctx3.beginPath();
ctx3.lineWidth = width/14;
ctx3.strokeStyle ="#e2e2e2";
ctx3.arc(width/2 ,width/2, width/3, 0, Math.PI*2);
ctx3.stroke();
ctx3.closePath();
}
setTimeout(function draw(){
var angle = Math.PI*1.5 + Math.PI *2* counter /100;
ctx3.clearRect(0,0,width,height);
baseCir3();
ctx3.beginPath();
ctx3.lineWidth = width/14;
ctx3.arc(width/2 ,width/2 ,width/3,1.5*Math.PI ,angle);
ctx3.strokeStyle = color;
ctx3.stroke();
ctx3.closePath();

ctx3.fillStyle = color;
ctx3.font = width/6 + "px Arial";
ctx3.textAlign = 'center';
ctx3.textBaseline = 'middle';
// ctx.fillText( percent3 + "", width / 2, width / 2 );
ctx3.transform = "rotate(90deg)";
ctx3.fillText(status ,width/2, height -25);
counter++;
if (counter <= percent3) {
setTimeout(draw ,20);
}
},200);



я хочу сделать через новый объект но когда я пишу так оно не работает, в чем может быть проблема?

window.onload = function(){
var newprogrs = new venhrun({
clas_progressbar: 'canvas',
});
}

function venhrun(v) {

this.canvas = document.getElementById(v.clas_progressbar);
this.ctx = canvas.getContext('2d');

this.canvas.height = /*width*/ 100;
this.percent = 9.5;
this.percent2 = this.percent *10;
var counter = 0;
var color = '#2af';
var width = /*canvas.width*/ 100;
var height = /*canvas.height*/ 100;



var new_ctx = this.ctx;
var new_percent2 = this.percent2;

this.baseCir = function (){
new_ctx.beginPath();
new_ctx.lineWidth = width/14;
new_ctx.strokeStyle ="#e2e2e2";
new_ctx.arc(width/2 ,width/2, width/3, 0, Math.PI*2);
new_ctx.stroke();
new_ctx.closePath();
}



setTimeout(function draw(){
this.angle = Math.PI*1.5 + Math.PI *2* counter /100;
new_ctx.clearRect(0,0,width,height);
baseCir();
new_ctx.beginPath();
new_ctx.lineWidth = width/14;
new_ctx.arc(width/2 ,width/2 ,width/3,1.5*Math.PI ,this.angle);
new_ctx.strokeStyle = color;
new_ctx.stroke();
new_ctx.closePath();



new_ctx.fillStyle = color;
new_ctx.font = width/6 + "px Arial";
new_ctx.textAlign = 'center';
new_ctx.textBaseline = 'middle';
// ctx.fillText( percent + "", width / 2, width / 2 );
new_ctx.transform = "rotate(90deg)";
new_ctx.fillText(status ,width/2, height -25);
counter++;
if (counter <= new_percent2) {
setTimeout(draw ,20);
}
},200);

}

Создавайте новый элемент canvas каждый раз.

this.canvas = document.createElement('canvas');
this.canvas.width = ...
this.canvas.height = ...
//...
document.body.appendChild(this.canvas);