counter spinning halfcircles dashed lines

by Darby Rathbone

HTML

<canvas id='canvas' width=400 height=400></canvas>

JavaScript

var can = document.getElementById('canvas');
can.ctx = can.getContext('2d');
can.width = 400;
can.height = 400;
var circle = document.createElement('canvas');
circle.ctx = circle.getContext('2d');
circle.width = circle.height = 200;
circle.buffer = document.createElement('canvas');
circle.buffer.width = circle.buffer.height = circle.width;
var buf = circle.buffer.getContext('2d');
var dashlength = 15,
    dashspeed = 1;
var current = 1;
setInterval(makedashes, 1000 / 60);

function makedashes() {

    buf.save();
    buf.clearRect(0, 0, can.width, can.height);
    buf.save();
    buf.translate(100, 100);
    buf.beginPath();
    buf.arc(0, 0, 100, 0, Math.PI * 2, false);
    buf.stroke();
    buf.closePath();
    buf.translate(-100, 100);
    buf.restore();
    buf.translate(100, 100);
    buf.rotate(current * Math.PI / 180);
    var counter = 0;
    for (var i = -180; i <= 180; i += dashlength) {
        buf.save();
        buf.rotate(i * Math.PI / 180);
        if (counter++ % 2 !== 0) buf.clearRect(-dashlength, -250, dashlength * 2, 300);


        buf.restore();
    }
    buf.restore();
    //console.log(current);
    current += dashspeed;
    current = current % (dashlength * 2);
    circle.ctx.clearRect(0, 0, can.width, can.height);
    circle.ctx.drawImage(circle.buffer, 0, 0, circle.buffer.width / 2, circle.buffer.height, 0, 0, circle.buffer.width / 2, circle.buffer.height);
    circle.ctx.save();
    circle.ctx.translate(circle.width, 0);
    circle.ctx.scale(-1, 1);
    circle.ctx.drawImage(circle.buffer, 0, 0, circle.buffer.width / 2, circle.buffer.height, 0, 0, circle.buffer.width / 2, circle.buffer.height);
    circle.ctx.restore();
    can.ctx.clearRect(0, 0, can.width, can.height);
    can.ctx.save();
    can.ctx.translate(can.width / 2, can.height / 2);
    can.ctx.rotate(Math.PI / 180 * 45);
    can.ctx.translate(-can.width / 2 + 100, -can.height / 2 + 100);
    can.ctx.drawImage(circle, 0, 0);
    can.ctx.restore();
}