<!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>