animated shapes at the same time using canvas

Question

1.I want to be able to animated shapes at the same time using canvas, but each to one side. 2.Then when the mouse was placed on each circle appears around it with a text.My canvas knowledge isn't amazing, Here is an image to display what i want.

anyone shed some light on how to do it? Here is a fiddle of what I've managed

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

var canvas01 = document.getElementById("canvas01");
var ctx01 = canvas01.getContext("2d");

canvas.width = 600;
canvas.height = 600;
canvas01.width = 600;
canvas01.height = 600;
var centerX = canvas01.width / 2;
var centerY = canvas01.height / 2;
var cw = canvas.width;
var ch = canvas.height;
var nextTime = 0;
var duration = 2000;
var start = Date.now();
var end = start + duration;
var endingPct = 100;
var endingPct1 = 510;
var pct = 0;
var pct1 = 0;
var i = 0;
var increment = duration;
var angle = 0;
var background = new Image();
var img = new Image();
img.src = "http://uupload.ir/files/2fhw_adur-d-01.jpg";
//http://uupload.ir/files/2fhw_adur-d-01.jpg
background.src = "http://uupload.ir/files/9a2q_adur-d-00.jpg";
//http://uupload.ir/files/9a2q_adur-d-00.jpg

Math.inOutQuart = function(n) {
    n *= 2;
    if (n < 1)
        return 0.5 * n * n * n * n;
    return -0.5 * ((n -= 2) * n * n * n - 2);
};
background.onload = function() {
    ctx.drawImage(background, 0, 0);
};

function animate() {
    var now = Date.now();
    var p = (now - start) / duration;
    val = Math.inOutQuart(p);

    pct = 101 * val;
    draw(pct);

    if (pct >= (endingPct )) {
        start = Date.now();
        return animate1();
    }
    if (pct < (endingPct )) {
        requestAnimationFrame(animate);
    }

}

function animate1() {
    var now1 = Date.now();
    var p1 = (now1 - start) / duration;
    val = Math.inOutQuart(p1);
    pct1 = centerY + 211 * val;
    SmallCircle(pct1);
    if (pct1 < (endingPct1 )) {
        requestAnimationFrame(animate1);
    }
}

function draw(pct) {
    var endRadians = -Math.PI / 2 + Math.PI * 2 * pct / 100;
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 180, -Math.PI / 2, endRadians);
    ctx.lineTo(canvas.width / 2, canvas.height / 2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.save();
    ctx.clip();
    ctx.drawImage(img, 0, 0);
    ctx.restore();

}

animate();
function SmallCircle(pctt) {

    ctx01.clearRect(0, 0, canvas01.width, canvas01.height);
    ctx01.beginPath();
    ctx01.arc(centerX, pctt, 7, 0, 2 * Math.PI, false);
    ctx01.closePath();
    ctx01.fillStyle = 'green';
    ctx01.fill();

}

Answer 1

You can use transformations to draw your small circles extending at a radius from the logo center.

Here is example code and a Demo:

The smallCircle function let you specify these settings:

• X & Y of the logo center: cx,cy ,
• The current radius which the small circle is from the logo center: pctt ,
• The angle of the smallCircle vs the logo center: angle ,
• The text to draw: text ,
• The smallCircle fill color: circlecolor ,
• The arc-circle stroke color: arccolor (if you don't want the arc-circle to appear you can specify transparent as the arccolor ),
• The text color: textcolor (if you don't want the text to appear you can specify transparent as the textcolor ),

 var canvas=document.getElementById("canvas01"); var ctx01=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } var cx=canvas.width/2; var cy=canvas.height/2; var PI2=Math.PI*2; var smallCount=8; var pctt=0; var chars=['A','B','C','D','E','F','G','H']; var circleFill='green'; var arcStroke='lawngreen'; var textFill='white'; ctx01.textAlign='center'; ctx01.textBaseline='middle'; animate(performance.now()); function animate(time){ ctx01.clearRect(0, 0, canvas01.width, canvas01.height); for(var i=0;i<smallCount;i++){ smallCircle( cx,cy,pctt,PI2/smallCount*i, chars[i],circleFill,'transparent','transparent'); } pctt+=1; if(pctt<100){ requestAnimationFrame(animate); }else{ for(var i=0;i<smallCount;i++){ smallCircle( cx,cy,pctt,PI2/smallCount*i, chars[i],circleFill,arcStroke,textFill); } } } function hilightCircle(n){} function smallCircle(cx,cy,pctt,angle,text,circlecolor,arccolor,textcolor){ // move to center canvas ctx01.translate(cw/2,ch/2); // rotate by the specified angle ctx01.rotate(angle); // move to the center of the circle ctx01.translate(pctt,0); // draw the filled small circle ctx01.beginPath(); ctx01.arc(0,0,7,0,PI2); ctx01.closePath(); ctx01.fillStyle = circlecolor; ctx01.fill(); // stroke the outside circle ctx01.beginPath(); ctx01.arc(0,0,7+5,0,PI2); ctx01.closePath(); ctx01.strokeStyle=arccolor; ctx01.stroke(); // unrotate so the text is upright ctx01.rotate(-angle); // draw the text ctx01.fillStyle=textcolor; ctx01.fillText(text,0,0); // reset all transforms to default ctx01.setTransform(1,0,0,1,0,0); } 

 body{ background-color:gray; } canvas{border:1px solid red; margin:0 auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>After animation, click the mouse.</h4> <canvas id="canvas01" width=300 height=300></canvas>