<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Atari 4-color palette dither generator</title>
        <style type="text/css">
            body {
                background-color: #4c5fd4;
                color: #e5f8ff;
                font-family: monospace;
            }
            img, canvas {
                /*width: 640px;
                height: 384px;*/
                image-rendering: pixelated;
            }
        </style>
        <script async src=dither4.js></script>
    </head>
    <body>
        <img id=source0 with=320 height=192 src=sample0.jpg>
        <canvas id=sink0 width=320 height=192></canvas>

        <img id=source1 with=320 height=192 src=sample1.jpg>
        <canvas id=sink1 width=320 height=192></canvas>

        <img id=source2 with=320 height=192 src=sample2.jpg>
        <canvas id=sink2 width=320 height=192></canvas>

        <img id=source3 with=320 height=192 src=sample3.jpg>
        <canvas id=sink3 width=320 height=192></canvas>

        <img id=source4 with=320 height=192 src=sample4.jpg>
        <canvas id=sink4 width=320 height=192></canvas>

        <img id=source5 with=320 height=192 src=sample5.jpg>
        <canvas id=sink5 width=320 height=192></canvas>

        <img id=source6 with=320 height=192 src=sample6.jpg>
        <canvas id=sink6 width=320 height=192></canvas>
    </body>
</html>