linethinning

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Thinning Algorithm</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
    <script >
        // Begin: Line Thinning Algorithm Zhang-Suen Thinning Algorithm
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Example: Draw a line
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(450, 450);
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();

// Get image data
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

function zhangSuenThinning(imageData, width, height) {
    const black = 0;
    const white = 255;
    const getPixel = (x, y) => (imageData[(y * width + x) * 4] === black ? 1 : 0);
    const setPixel = (x, y, value) => {
        const index = (y * width + x) * 4;
        imageData[index] = imageData[index + 1] = imageData[index + 2] = value;
        imageData[index + 3] = 255; // Alpha channel
    };

    let changing = true;
    while (changing) {
        changing = false;
        let toWhite = [];

        // Step 1
        for (let y = 1; y < height - 1; y++) {
            for (let x = 1; x < width - 1; x++) {
                const P2 = getPixel(x, y - 1), P3 = getPixel(x + 1, y - 1);
                const P4 = getPixel(x + 1, y), P5 = getPixel(x + 1, y + 1);
                const P6 = getPixel(x, y + 1), P7 = getPixel(x - 1, y + 1);
                const P8 = getPixel(x - 1, y), P9 = getPixel(x - 1, y - 1);

                const A = (!P2 && P3) + (!P3 && P4) + (!P4 && P5) + (!P5 && P6) + (!P6 && P7) + (!P7 && P8) + (!P8 && P9) + (!P9 && P2);
                const B = P2 + P3 + P4 + P5 + P6 + P7 + P8 + P9;

                if (
                    getPixel(x, y) &&
                    A === 1 &&
                    B >= 2 && B <= 6 &&
                    !((P2 && P4 && P6) || (P4 && P6 && P8))
                ) {
                    toWhite.push([x, y]);
                    changing = true;
                }
            }
        }

        toWhite.forEach(([x, y]) => setPixel(x, y, white));
        toWhite = [];

        // Step 2
        for (let y = 1; y < height - 1; y++) {
            for (let x = 1; x < width - 1; x++) {
                const P2 = getPixel(x, y - 1), P3 = getPixel(x + 1, y - 1);
                const P4 = getPixel(x + 1, y), P5 = getPixel(x + 1, y + 1);
                const P6 = getPixel(x, y + 1), P7 = getPixel(x - 1, y + 1);
                const P8 = getPixel(x - 1, y), P9 = getPixel(x - 1, y - 1);

                const A = (!P2 && P3) + (!P3 && P4) + (!P4 && P5) + (!P5 && P6) + (!P6 && P7) + (!P7 && P8) + (!P8 && P9) + (!P9 && P2);
                const B = P2 + P3 + P4 + P5 + P6 + P7 + P8 + P9;

                if (
                    getPixel(x, y) &&
                    A === 1 &&
                    B >= 2 && B <= 6 &&
                    !((P2 && P4 && P8) || (P2 && P6 && P8))
                ) {
                    toWhite.push([x, y]);
                    changing = true;
                }
            }
        }

        toWhite.forEach(([x, y]) => setPixel(x, y, white));
    }
}

// Apply thinning
zhangSuenThinning(data, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
// End: Line Thinning Algorithm Zhang-Suen Thinning Algorithm

    </script>
</body>
</html>