function - layering up Canvas to make a background -

with of other stack overflow members. i've created animated canvas section of website building.

i'm pretty new canvas, want have animated arc/circle

function animate(elementid, endpercent) {      var canvas = document.getelementbyid(elementid);      var context = canvas.getcontext('2d');      var x = canvas.width / 2;      var y = canvas.height / 2;      var radius = 43.5;      var curperc = 0;      var counterclockwise = false;      var circ = math.pi * 2;      var quart = math.pi / 2;       context.linewidth = 9;      context.strokestyle = '#c51414';      context.linecap = 'butt';       context.shadowoffsetx = 1;      context.shadowoffsety = 1;      context.shadowblur = 1;      context.shadowcolor = "#c51414";        function render(current) {          context.clearrect(0, 0, canvas.width, canvas.height);          context.beginpath();          context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);          context.stroke();          curperc++;          if (curperc <= endpercent) {              requestanimationframe(function () {                  render(curperc / 100);              });          }      }      render();  }  animate('skill1', 90); animate('skill2', 80); animate('skill3', 45); animate('skill4', 92); animate('skill5', 80); animate('skill6', 65); 

here script i'm using @ moment. @ bottom uses

  animate('skill3', 45); 

the 45 @ end percent arc travels to. here fiddle make easier see.

http://jsfiddle.net/dlave/

what want still using canvas, give each arc complete background circle. here image of i'm trying achieve, (i did in photoshop)

i don't want use image, , place underneath arc, i've tried background image on canvas i'm anal alignment , it's literally micro-pixels different align background animated arc. plus want canvas.

can me out fiddle of how it? guess it'd laying animated arc on top of static circle.

please driving me insane!

well, more of css question, layering canvases making sure right on top of each other. simple solution create background canvas (call #bgcanvas1), add in markup next #mycanvas1, , set them both position: absolute places them according closest positioned ancestor, stacking them. in order 1 show above other unrelated html position, set z-index property of 1 higher value other.

so, css, applying i've said:

#mycanvas1, #bgcanvas1 {     position: absolute; } #bgcanvas1 {     z-index: 1; } #mycanvas1 {     z-index: 2; } 

and simple update html:

<canvas id="mycanvas1" width="250" height="250"></canvas>  <canvas id="bgcanvas1" width="250" height="250"></canvas>  

here's fiddle it: http://jsfiddle.net/dlave/2/

you may notice i've updated javascript function bit, allow passing color of circle draw. may want customize more later, , separate different functions, drawing static circle on background canvas easier.