index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>마스크 엣지 검출</title>
   <style>
      .mask canvas{
         background-color: #2c2c2c;
      }

      .imgBox {
         height: auto;
         padding: 10px;
         margin-top: 0;
         text-align: center;
         display: inline-block;
      }
      h2 {
         width: 100%;
         text-align: center
      }
      canvas {
         box-sizing: border-box;
         /*width: 100%;*/
         width: 600px;
         height: auto;
         image-rendering: -webkit-optimize-contrast;
         border: 10px gray solid;
      }
      .mask canvas {
         border: 15px gray solid;
      }
      .edge canvas {
         border: 15px #000b39 solid;
      }

   </style>
</head>
<body>
   <h2>엣지 검출</h2>
   <script src="js/bundle.js"></script>
</body>
</html>