Fillbill,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id ="ctx"></canvas>
<script>
window.onload = init;
var ctx, canvas;
function init() {
canvas = document.getElementById("ctx");
ctx = canvas.getContext("2d");
setTimeout(draw,500);
}
function draw() {
// Переменые
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
// Ведущий ноль, проверки и условия
let seconds = date.getSeconds();
if (minutes <= 9){
minutes = "0" + minutes;
}
if (hours <= 9 ) {
hours = "0" + hours;
}
// Рисование
ctx.fillStyle = "Turquoise";
ctx.strokeStyle = "SteelBlue";
ctx.lineWidth = 5;
ctx.strokeRect(10,10,250,130);
ctx.fillRect(13,13,244,124);
// Цифры
ctx.fillStyle = "white"
ctx.font = "5em serif ";
ctx.fillText(hours,30,100);
ctx.fillText(seconds % 2 ? ":" : " ", 125, 93);
ctx.fillText(minutes,160,100);
setTimeout(draw,500);
}
</script>
</body>
</html>