Canvas Follow Arrows Sharp

by smombartz

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arrow Grid</title>
</head>
<body>
 <style>
    canvas {
      display: block;
    }
</style>
<div id="arrows" style="width: 100%; height: 100vh;">
<canvas id="arrowCanvas"></canvas>
</div>

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

    // Get device pixel ratio (DPI)
    const dpi = window.devicePixelRatio;

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

        // Set the actual canvas dimensions using DPI
        canvas.setAttribute('height', styleHeight * dpi);
        canvas.setAttribute('width', styleWidth * dpi);

        // Scale the context to match DPI
        ctx.scale(dpi, dpi);
    }

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

    resizeCanvas();

    // Grid properties
    const arrowSize = 10;
    const gap = 16;
    const gridSpacing = arrowSize + gap;

    // Utility to draw a single arrow
    function drawArrow(x, y, rotation) {
        ctx.save();

        // Translate to the center of the arrow
        ctx.translate(x, y);

        // Rotate the canvas with a 90-degree offset
        ctx.rotate(rotation + Math.PI / 2);

        // Translate back to align the arrow correctly relative to the rotation point
        ctx.translate(-arrowSize / 2, -arrowSize / 2);

        // Draw the arrow
        ctx.beginPath();
        ctx.strokeStyle =...