var canvas = document.getElementById("mycanvas");
draw(canvas);

function draw(canvas){
    var context = canvas.getContext('2d'), centerX = Math.floor(canvas.width / 2), centerY = Math.floor(canvas.height / 2),radius = Math.floor(canvas.width / 2);
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    var begin = 0; interval = 90;
    var arcSize= degreesToRadians(interval);
    for(var startingAngle=begin; startingAngle < 360;){
        context.beginPath();
        context.moveTo(centerX, centerY);
        context.arc(centerX, centerY, radius, degreesToRadians(startingAngle), startingAngle + arcSize, false);
        context.closePath();
        context.stroke();
        startingAngle = startingAngle + interval;
    }
    lineAtAngle(context,centerX,centerY,radius,30);
}

function degreesToRadians(degrees) {
    return (degrees * Math.PI)/180;
}


function lineAtAngle(context,x1, y1, length, angle) {
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x1 + degreesToRadians(angle), y1 + degreesToRadians(angle));
    context.strokeStyle = 'red';
    context.closePath();
    context.stroke();
}

<canvas id="mycanvas" width="400" height="400"></canvas>