Files
  • index.html
  • image_data.js
  • images.js
  • lines.js
  • main.js
  • maze_walker.js
  • origin.png
  • pixelite.js
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>

<html>
  <head>
    <style>
      .screen {
        width: 384px;
        height: 272px;
        background: #7C71DA;
      }
      canvas {
        background-color: #3E32A2;
        margin: 36px 32px;
      }
    </style>
  </head>

  <body>
    <h3><a target="_blank" href="https://10print.org/">10 print</a></h3>
    <div> Original (image): </div>
    <img src="origin.png" />
    <div> Using Canvas API: </div>
    <div class="screen">
      <canvas id="canvas-lines"></canvas>
    </div>
    <div> Pixel manipulation: </div>
    <div class="screen">
      <canvas id="canvas-image-data"></canvas>
    </div>
    <div> Maze walker: </div>
    <div class="screen">
      <canvas id="canvas-maze-walker"></canvas>
    </div>
    <script src="pixelite.js"></script>
    <script src="images.js"></script>
    <script src="image_data.js"></script>
    <script src="lines.js"></script>
    <script src="maze_walker.js"></script>
    <script src="main.js"></script>
  </body>

</hmtl>
result
console