EnglishISTISTEST Mon - Sat 09:00-20:00 +91-884-9999-992 Mon - Sat 22:30-09:30 +91-884-9999-992
mj@inventive9.com
Expertise
IT Services
Mission
Create Innovative Products
Trusted By
Global Clients
Get A Quote

Create your branding Html Clock

March 2, 2020
, , , , , , ,
5

Create your own branding Html Clock using Html5 Canvas. We did not use any externals js or jquery in this tutorial.

You can put it on your blog, CRM, and Backofiice panels. You can put your company name or the logo file in Html Clock for branding purposes.

Check out how our Html Clock will look when it's done.

Let's Create Html Clock

<!DOCTYPE html>
<html>
<body>
<div style=" text-align: center; ">
<canvas id="canvas" width="400" height="400"
style="background-color:#fff">
</canvas>

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

function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
ctx.font = "30px Arial";
ctx.fillText("Inventive9",10,50);

}

function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = '#000c54';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#FFF');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#000c54');
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 = '#FFF';
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);

}
}

function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</div>

</body>
</html>

Just Copy and Paste above snippete in any html page, you can relpace the your company name here in the above code : ctx.fillText(“Inventive9”,10,50);

Thanks for Reading.

About the author

Full-stack web developer with great knowledge of SEO & Digital Marketing. 7+ years of experience in Web Development.
5 Responses

Leave a Reply