WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Canvas Clock


By using HTML canvas we can create analog clock


Part I - Create the Canvas

Must be clock needs an HTML container. Create an 400 x 400 pixel HTML canvas:

HTML code:

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

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

function drawClock() {
    ctx.arc(0, 0, radius, 0 , 2*Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}
</script>

</body>
</html>
Try it Yourself »

Code Explained

we NEED to set HTML <canvas> element to web page:

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

Create a canvas object known as var canvas from the HTML canvas element:

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

Create a 2D drawing object known as var ctx for the canvas object:

var ctx = canvas.getContext("2d");

Calculate the clock radius, using the height of the canvas:

var radius = canvas.height / 2;

Remap the (0,0) position (of the drawing object) to the center of the canvas:

ctx.translate(radius, radius);

Reduce the clock radius (to 90%) to draw the clock well inside the canvas:

radius = radius * 0.90;

Create a function to draw the clock:

function drawClock() {
    ctx.arc(0, 0, radius, 0 , 2*Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
}