JSFiddle - React, Tailwind, and code Playground

by smombartz

HTML

<style>
    canvas {
        display: block;
    }

    #arrows {
        height: 100vh; /* Full height of the viewport */
        position: fixed; /* Anchor to the right */
        right: 0;
        top: 0;
        overflow: hidden; /* Ensure no overflow */
    }
</style>

<div id="arrows">
    <canvas id="arrowCanvas"></canvas>
</div>

<script>
    const container = document.getElementById('arrows');
    const canvas = document.getElementById('arrowCanvas');
    const ctx = canvas.getContext('2d');

    // Grid properties
    const arrowSize = 10; // Arrow size
    const gap = 16; // Gap between arrows
    const gridSpacing = arrowSize + gap; // Total spacing per arrow (size + gap)
    const columns = 7; // Number of columns to display

    // Set canvas width dynamically based on columns
    function setCanvasWidth() {
        container.style.width = `${columns * gridSpacing}px`; // Set container width
        canvas.style.width = `${columns * gridSpacing}px`; // Set canvas style width
    }

    // Fix canvas DPI to prevent blurriness
    function fixDPI() {
        const styleHeight = +getComputedStyle(canvas).getPropertyValue("height").slice(0, -2);
        const styleWidth = +getComputedStyle(canvas).getPropertyValue("width").slice(0, -2);

        canvas.setAttribute('height', styleHeight * window.devicePixelRatio);
        canvas.setAttribute('width', styleWidth * window.devicePixelRatio);

        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    // Resize canvas to match container dimensions and fix DPI
    function resizeCanvas() {
        canvas.style.height = `${container.clientHeight}px`;
        setCanvasWidth();
        fixDPI();
    }

    // Draw a single arrow
    function drawArrow(x, y, rotation) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(rotation + Math.PI / 2);
        ctx.translate(-arrowSize / 2, -arrowSize / 2);

        ctx.beginPath();
        ctx.strokeStyle = "#D5D4D2";
       ...