Clock numbers example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Clock Numbers</title>
	</head>
<body>
	 <h1 style="color:green; font-style:italic;">Clock Numbers </h1>
    <canvas id="mycanvas" width="200" height="200"
            style="background-color:magenta"></canvas>

var radius = 100;
        ctx.translate(100, 100);
        radius = 100 * 0.9
        drawClock();

function drawClock() {
            drawFace(ctx, radius);
            drawNumbers(ctx, radius);
        }

function drawFace(ctx, radius) {
            var grad;
            ctx.beginPath();
            ctx.arc(0, 0, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            grad = ctx.createRadialGradient(0, 0, radius * 1.95, 0, 0, radius * 1.05);
            grad.addColorStop(0, '#333');
            grad.addColorStop(0.5, 'white');
            grad.addColorStop(1, '#333');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.1;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = '#333';
            ctx.fill();
        }

function drawNumbers(ctx, radius) {
            var ang;
            var num;
            ctx.font = radius * 0.15 + "px arial";
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            for (num = 1; num < 13; num++) {
                ang = num * Math.PI / 6;
                ctx.rotate(ang);
                ctx.translate(0, -radius * 0.85);
                ctx.rotate(-ang);
                ctx.fillText(num.toString(), 0, 0);
                ctx.rotate(ang);
                ctx.translate(0, radius * 0.85);
                ctx.rotate(-ang);
            }
        }
    </script>
</body>
</html>

Note: We DO NOT save your trial code in our database.

Clock Numbers

Write code here

Output