Edit in JSFiddle

// Draw  ideas  on the canvas with animation runs in most modern browsers
//
$("canvas").drawText({
    layer: true,
    name: "jbs",
    fillStyle: "#9cf",
    strokeStyle: "red",
    strokeWidth: 3,
    x: 90,
    y: 10,
    font: "72pt Verdana, sans-serif",
    text: "iMAGe",
    group: "anim",
})
$("canvas").drawText({
    layer: true,
    name: "rest",
    fillStyle: "#9cf",
    strokeStyle: "red",
    strokeWidth: 3,
    x: -90,
    y: -100,
    font: "36pt Verdana, sans-serif",
    text: "nation"
})
// Draw a circle
.drawArc({
    layer: true,
    group: "anim",
    fillStyle: "#c33",
    x: 100,
    y: 100,
    radius: 50
})
// Draw another circle
.drawArc({
    layer: true,
    group: "anim",
    fillStyle: "#36c",
    x: 250,
    y: 100,
    radius: 50
})
// Animate all layers in the group "circles"
.animateLayerGroup("anim", {
    y: 250,
}, 2200);
$("canvas").animateLayer(0, {
    fillStyle: "rgb(0, 0, 0)",
    x: 170,
    y: 50
}, 2000, "slow", "swing");
$("canvas").animateLayer("rest", {
    strokeStyle: "rgb(00,00,80)",
    fillStyle: "rgb(00,00,80)",
    rotate: "+=720",
    x: 402,
    y: 66
}, 4000, "slow", "swing")
$("canvas").drawText({
    layer: true,
    name: "rest2",
    fillStyle: "rgb(00,00,80)",
    strokeWidth: 2,
    x: -5,
    y: -200,
    font: "14pt sans-serif",
    text: "Experts in Image Generation and Refinement",
});
// $("canvas").delayLayer("rest2", 5000);
$("canvas").animateLayer("rest2", {
    x: 220,
    y: 150
}, 1000, "slow", "swing");

<div id='test'>
    <canvas width="500" height="300"></canvas>
</div>

#test {
    width: 500px;
    height: 300px;
    background: yellow;
    padding: 0px;
    border: 10px solid #999;
}