napchart 24h clock arrow - tampermonkey

napchart.js

// ==UserScript==
// @name         Add 24h Clock Indicator to Canvas
// @namespace    http://tampermonkey.net/
// @version      2025-06-20
// @description  Adds a current time indicator to 24h radial canvas chart
// @author       You
// @match        https://napchart.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=napchart.com
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    const canvasId = "asdf";
    const lineColor = "rgba(0, 0, 0, 0.5)"; // semi-transparent
    const lineWidth = 4;
    const pollInterval = 2000; // ms

    function drawClockHand(ctx, canvas) {
        const now = new Date();
        const secondsSinceMidnight = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
        const angle = (secondsSinceMidnight / 86400) * 2 * Math.PI - Math.PI / 2;

        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const radius = Math.min(cx, cy) * 0.85;

        const x = cx + radius * Math.cos(angle);
        const y = cy + radius * Math.sin(angle);

        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        ctx.moveTo(cx, cy);
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fillStyle = lineColor;
        ctx.fill();
        ctx.restore();
    }

    function enhanceCanvas() {
        console.log("canva launch");
        const canvas = document.getElementById(canvasId);
        if (!canvas) return;
        console.log("canva found");

        const ctx = canvas.getContext("2d");
        if (!ctx) return;

        const backup = ctx.getImageData(0, 0, canvas.width, canvas.height);

        function update() {
            ctx.putImageData(backup, 0, 0);
            drawClockHand(ctx, canvas);
        }

        update();
        setInterval(update, pollInterval);
    }

    const checkExist = setInterval(() => {
        const canvas = document.getElementById(canvasId);
        console.log("canva check");
        if (canvas) {
            clearInterval(checkExist);
            enhanceCanvas();
        }
    }, 1000);
})();

script will add the arrow on the clock in napchart
like this https://napchart.com/snapshot/jaZPwL8nn