CODEWITHSUNDEEP
functionanimationcanvasjquery-animatehtml5-canvas
BigOrinj
BigOrinj

Reputation: 243

layering up Canvas to make a background

With some help of other Stack Overflow members. I've created an Animated canvas section of a website that i am building.

I'm pretty new to Canvas, what I want to do is have an 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 is the script i'm using at the moment. At the bottom it uses the 

  animate('skill3', 45);

The 45 at the end is the Percent the Arc travels to. Here is a fiddle to make it easier to see.

http://jsfiddle.net/dLAVe/

What i want to do is still using canvas, give each arc a complete background circle. Here is an image of what I'm trying to achieve, (I did this in photoshop)

Arc with Background

I don't want to use an Image, and place it underneath the arc, I've already tried this with a background image on the canvas but i'm really anal about the alignment and it's literally micro-pixels different to align the background to the animated arc. Plus i want to do it with Canvas.

Can anyone help me out with a fiddle of how to do it? I guess it'd be laying the animated arc on top of a static circle.

Please help as this is driving me insane!

Upvotes: 1

Views: 394

Answers (1)

dvir
dvir

Reputation: 5115

Well, this is more of a CSS question, as layering canvases is just making sure they are right on top of each other. A simple solution would be to create a background canvas (call it #bgCanvas1), add it in the markup next to your #myCanvas1, and set them both to position: absolute which places them according to the closest positioned ancestor, effectively stacking them. In order for one to show up above the other unrelated to their HTML position, you could set the z-index property of one to a higher value than the other.

So, for the CSS, applying what I've said:

#myCanvas1, #bgCanvas1 {
    position: absolute;
}
#bgCanvas1 {
    z-index: 1;
}
#myCanvas1 {
    z-index: 2;
}

And just a simple update to the HTML:

<canvas id="myCanvas1" width="250" height="250"></canvas> 
<canvas id="bgCanvas1" width="250" height="250"></canvas>

Here's the fiddle for it: http://jsfiddle.net/dLAVe/2/

You may notice that I've updated your JavaScript function a bit, to allow passing a color of the circle to draw. You may want to customize it more later, and separate it into different functions, so drawing a static circle on the background canvas is easier.

Upvotes: 1

Related Questions