index.html

<!doctype html>
<html>
  <head>
    <title>Random Pattern Generator</title>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Random Pattern Generator</h1>
    <span id="colors">
      <span class="color"><input class="color_picker" type="color" value="#F0F0FF"><button onclick="delete_color(this.parentNode)">x</button></span>
      <span class="color"><input class="color_picker" type="color" value="#BBDDFF"><button onclick="delete_color(this.parentNode)">x</button></span>
    </span>
    <button onclick="add_color()">+</button>
    <button onclick="generate_pattern()">GENERATE</button><br>
    <canvas id="canvas" class="canvas" width="900" height="600"></canvas>
    <canvas id="image_canvas" class="image_canvas"></canvas>
  </body>
</html>