Clock face example - Tech Funda

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Clock face</title>
	</head>
<body>
	 <canvas id="canvas" width="200" height="200"
            style="background-color:magenta"></canvas>
    <p><i><b>Canvas clock with face</b></i></p>

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

function drawClock() {
            drawFace(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(1, 2, radius * 0.67, 0, 0, radius * 1.05);
            grad.addColorStop(0, 'pink');
            grad.addColorStop(0.5, 'green');
            grad.addColorStop(1, 'green');
            ctx.strokeStyle = grad;
            ctx.lineWidth = radius * 0.2;
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
            ctx.fillStyle = 'black';
            ctx.fill();
        }
    </script>
</body>
</html>

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

Clock Face

Write code here

Output