<script type="text/javascript">
   function clock(week, day, canvas) {
        var now = new Date();
        var ctx = document.getElementById(canvas).getContext('2d');
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.fillStyle = 'white';
        ctx.arc(150, 150, 145, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();

        ctx.beginPath();
        ctx.arc(150, 150, 145, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(150, 150, 115, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(150, 150, 85, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150, 150);
        ctx.rotate(-Math.PI/2);
        for (var i = 0; i < 40; i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/20);
            ctx.moveTo(115,0);
            ctx.lineTo(85,0);
            ctx.stroke();
        }

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150, 150);
        ctx.rotate(-Math.PI/2);
        for (var i = 0; i < 7; i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/3.5);
            ctx.moveTo(145,0);
            ctx.lineTo(115,0);
            ctx.stroke();
            
        }

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150,150);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "red";
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.rotate((week + day / 7) * Math.PI / 20);
        ctx.moveTo(-15,0);
        ctx.lineTo(100,0);
        ctx.stroke();

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150,150);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "black";
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.rotate((day + (now.getHours() * 60 * 60 + now.getMinutes() * 60 + now.getSeconds())/( 24 * 60 * 60 )) * Math.PI/3.5);
        ctx.moveTo(-15,0);
        ctx.lineTo(130,0);
        ctx.stroke();

        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.translate(150,150);
        ctx.rotate(-Math.PI/2);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.beginPath();
        ctx.arc(150, 150, 10, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'black';
        ctx.stroke();
    }
</script>