JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="300px" height="200px" id='alarm'></canvas>
<div id='wrap'>some text some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
}
#alarm{
    position:absolute;
    left:70px;
    z-index:-1;
}
#wrap{
    width:100%;
    height:100%;
    background:rgba(125,200,100, 0.4);
}

JavaScript

var canvas=document.getElementById("alarm");
    //Берём его контекст (с его помощью и будем рисовать)
    var ctx=canvas.getContext("2d");
 
    //Размеры "холста"
    var width=canvas.width,height=canvas.height;
    var position_s=0,position_m=0,position_h=0;
 
    //Получаем значения в радианах, соответствующие градусам,
    //на которые повернётся соответствующая стрелка часов за секунду
    var sec=6*Math.PI/180,
        min=1/10*Math.PI/180,
        hour=1/120*Math.PI/180;
 
    //И текущее положение стрелок на часах
    //С переводом из секунд в соответствующие единицы времени
    position_s=new Date().getSeconds()*sec;
    position_m=new Date().getMinutes()*60*min;
    position_h=new Date().getHours()*3600*hour+new Date().getMinutes()*60*hour;
     
    //функция перерисовки Canvas'а
    //вызывается каждую секунду
    function alarm(){
 
        //функция рисования линии
        //первый аргумент - градус поворота стрелки
        //второй - длина стрелки в "px"
        //третий - толщина стрелки в "px"
        function line(pos,r,w){
            ctx.lineWidth=w||1;
            ctx.beginPath();
            ctx.moveTo(width/2,height/2);
            ctx.lineTo(width/2+r*Math.cos(pos-Math.PI/2),
                        height/2+r*Math.sin(pos-Math.PI/2));
            ctx.stroke();
            ctx.closePath();
        }
        position_s+=sec;
        position_m+=min;
        position_h+=hour;
 
        //Функция очистки Canvas
        ctx.clearRect (0, 0, width, height);
        //Начало рисования
        ctx.beginPath();
        //Рисуется круг циферблата
        ctx.arc(width/2,height/2,57,0,2*Math.PI);
        //Обводится по контуру
        ctx.stroke();
        //Т.к. fill() не было вызвано, то только обрисует по контуру
        ctx.closePath();
 
        //Рисует 12 кружков, соответствующих часам
        //Math.PI*2 - полный круг часов
        //Math.PI*2/12 - это 1/12 полного круга часов
        for(var i=0;i<=Math.PI*2;i+=Math.PI*2/12){
           ...