HTML Canvas Clock

<!DOCTYPE html>
<html>
<body>

<canvas id="clock-canvas" width="500" height="500"
style="background-color:red">
</canvas>

<script>
var clockCanvas = document.getElementById("clock-canvas");
var ctx = clockCanvas.getContext("2d");
var radius = clockCanvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawMyClock();

function drawMyClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
 var grad;
  ctx.beginPath();  
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);  
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.2;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.05, 0, 2*Math.PI);
  ctx.fillStyle = 'black';
  ctx.fill();
drawClockNumbers(ctx, radius);
}

function drawClockNumbers(ctx, clockRadius) {
    var angle;
    var timeCounter;
    ctx.font = clockRadius*0.16 + "px Verdana";
    ctx.textBaseline="top";
    ctx.textAlign="center";
    for(timeCounter= 1; timeCounter < 13; timeCounter++){
        angle = timeCounter * Math.PI / 6;
        ctx.rotate(angle);
        ctx.translate(0, -clockRadius*0.85);
        ctx.rotate(-angle);
        ctx.fillText(timeCounter.toString(), 0, 0);
        ctx.rotate(angle);
        ctx.translate(0, clockRadius*0.85);
        ctx.rotate(-angle);
    }
}
</script>

</body>
</html>