View raw

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        sheets = {
            "0": [{"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 250, "y": 0 }, {"x": 125, "y": 0 }, {"x": 125, "y": 1000 }, {"x": 0, "y": 1000 }, {"x": 250, "y": 1000 } ],
            "1": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 750, "y": 0 }, {"x": 750, "y": 1000 } ],
            "2": [{"x": 0, "y": 125 }, {"x": 125, "y": 0 }, {"x": 625, "y": 0 }, {"x": 750, "y": 125 }, {"x": 750, "y": 375 }, {"x": 675, "y": 500 }, {"x": 675, "y": 500 }, {"x": 125, "y": 500 }, {"x": 0, "y": 625 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 } ],
            "3": [{"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 500, "y": 1000 }, {"x": 750, "y": 500 }, {"x": 250, "y": 500 }, {"x": 750, "y": 500 }, {"x": 1000, "y": 0 } ],
            "4": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 0, "y": 1000 }, {"x": 0, "y": 500 }, {"x": 750, "y": 500 }, {"x": 750, "y": 1000 }, {"x": 750, "y": 0 } ],
            "5": [{"x": 0, "y": 0 }, {"x": 500, "y": 1000 }, {"x": 750, "y": 500 }, {"x": 250, "y": 500 }, {"x": 250, "y": 500 }, {"x": 750, "y": 500 }, {"x": 1000, "y": 0 } ],
            "6": [{"x": 750, "y": 125 }, {"x": 625, "y": 0 }, {"x": 125, "y": 0 }, {"x": 0, "y": 125 }, {"x": 0, "y": 875 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 } ],
            "7": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 0, "y": 500 }, {"x": 750, "y": 1000 }, {"x": 750, "y": 1000 }, {"x": 0, "y": 500 }, {"x": 750, "y": 0 } ],
            "8": [{"x": 0, "y": 0 }, {"x": 250, "y": 0 }, {"x": 125, "y": 0 }, {"x": 125, "y": 1000 }, {"x": 0, "y": 1000 }, {"x": 250, "y": 1000 }, {"x": 250, "y": 1000 } ],
            "9": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 750, "y": 0 }, {"x": 750, "y": 1000 } ],
            "10": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 }, {"x": 750, "y": 125 }, {"x": 625, "y": 0 }, {"x": 0, "y": 0 } ],
            "11": [{"x": 0, "y": 1000 }, {"x": 0, "y": 125 }, {"x": 125, "y": 125 }, {"x": 125, "y": 0 }, {"x": 625, "y": 0 }, {"x": 750, "y": 125 }, {"x": 750, "y": 1000 } ],
            "12": [{"x": 0, "y": 125 }, {"x": 125, "y": 0 }, {"x": 625, "y": 0 }, {"x": 750, "y": 125 }, {"x": 750, "y": 125 }, {"x": 750, "y": 375 }, {"x": 675, "y": 500 }, {"x": 125, "y": 500 }, {"x": 0, "y": 625 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 1000 }, {"x": 750, "y": 875 } ],
            "13": [{"x": 0, "y": 1000 }, {"x": 500, "y": 1000 }, {"x": 500, "y": 0 }, {"x": 500, "y": 1000 }, {"x": 1000, "y": 1000 } ],
            "14": [{"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 }, {"x": 750, "y": 625 }, {"x": 625, "y": 500 }, {"x": 0, "y": 500 }, {"x": 625, "y": 500 }, {"x": 875, "y": 0 }, {"x": 875, "y": 0 } ],
            "15": [{"x": 0, "y": 0 }, {"x": 250, "y": 0 }, {"x": 125, "y": 0 }, {"x": 125, "y": 1000 }, {"x": 0, "y": 1000 }, {"x": 250, "y": 1000 } ],
            "16": [{"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 500, "y": 1000 }, {"x": 750, "y": 500 }, {"x": 250, "y": 500 }, {"x": 750, "y": 500 }, {"x": 1000, "y": 0 } ],
            "17": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 0, "y": 1000 }, {"x": 0, "y": 0 }, {"x": 750, "y": 0 } ],
            "18": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 }, {"x": 750, "y": 625 }, {"x": 625, "y": 500 }, {"x": 625, "y": 500 }, {"x": 0, "y": 500 } ],
            "19": [{"x": 0, "y": 0 }, {"x": 0, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 }, {"x": 750, "y": 625 }, {"x": 625, "y": 500 }, {"x": 625, "y": 500 }, {"x": 0, "y": 500 }, {"x": 625, "y": 500 }, {"x": 875, "y": 0 } ],
            "20": [{"x": 750, "y": 125 }, {"x": 625, "y": 0 }, {"x": 125, "y": 0 }, {"x": 0, "y": 125 }, {"x": 0, "y": 125 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 }, {"x": 750, "y": 125 } ],
            "21": [{"x": 750, "y": 125 }, {"x": 625, "y": 0 }, {"x": 125, "y": 0 }, {"x": 125, "y": 0 }, {"x": 0, "y": 125 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 } ],
            "22": [{"x": 750, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 0 }, {"x": 0, "y": 500 }, {"x": 750, "y": 500 }, {"x": 0, "y": 500 }, {"x": 0, "y": 1000 }, {"x": 750, "y": 1000 } ],
            "23": [{"x": 0, "y": 125 }, {"x": 125, "y": 0 }, {"x": 625, "y": 0 }, {"x": 625, "y": 0 }, {"x": 750, "y": 125 }, {"x": 750, "y": 375 }, {"x": 675, "y": 500 }, {"x": 125, "y": 500 }, {"x": 0, "y": 625 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 } ],
            "24": [{"x": 0, "y": 125 }, {"x": 125, "y": 0 }, {"x": 625, "y": 0 }, {"x": 750, "y": 125 }, {"x": 750, "y": 375 }, {"x": 750, "y": 375 }, {"x": 675, "y": 500 }, {"x": 125, "y": 500 }, {"x": 0, "y": 625 }, {"x": 0, "y": 875 }, {"x": 125, "y": 1000 }, {"x": 625, "y": 1000 }, {"x": 750, "y": 875 } ]
        }
    </script>
    <style>
        canvas {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <canvas class="i1"></canvas>
    <canvas class="i2"></canvas>
    <canvas class="i3"></canvas>
    <canvas class="i4"></canvas>
    <canvas class="i5"></canvas>
    <canvas class="i6"></canvas>
    <canvas class="i7"></canvas>
    <canvas class="i8"></canvas>
    <canvas class="i9"></canvas>
    <canvas class="i10"></canvas>
    <canvas class="i11"></canvas>
    <canvas class="i12"></canvas>
    <canvas class="i13"></canvas>
    <canvas class="i14"></canvas>
    <canvas class="i15"></canvas>
    <canvas class="i16"></canvas>
    <canvas class="i17"></canvas>
    <canvas class="i18"></canvas>
    <canvas class="i19"></canvas>
    <canvas class="i20"></canvas>
    <canvas class="i21"></canvas>
    <canvas class="i22"></canvas>
    <canvas class="i23"></canvas>
    <canvas class="i24"></canvas>
    <canvas class="i25"></canvas>

    <script>
        function getContext(i) {
            return document.querySelector('.i' + (+i + 1)).getContext('2d')
        }

        for (let sheetIdx of Object.keys(sheets)) {
            let points = sheets[sheetIdx]
            let context = getContext(sheetIdx)
            context.beginPath()
            context.moveTo(0, 0)

            for (let i = 0; i < points.length; i++) {
                context.lineTo(points[i].y / 10, points[i].x / 10)
            }

            context.stroke()
        }
    </script>
</body>
</html>