123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
<head>
  <title>Pixel Art Maker</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <script src="https://use.fontawesome.com/8c47be805b.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Exo:300,400,500,600|Montserrat:400,500,600" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <div class="logo">
      <svg version="1.1" id="squares" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
        <rect x="1.5" y="1.3" style="fill:#9E2021;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="44.9" height="44.9"/><rect x="53.5" y="1.3" style="fill:#155F60;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="45.1" height="45.1"/><rect x="1.5" y="53.4" style="fill:#6C943E;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="45.1" height="45.1"/><rect x="53.5" y="53.4" style="fill:#1E7F3F;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="45.1" height="45.1"/>
      </svg>
    </div>
    <h1 class="header-title">Pixel Art Maker</h1>
    <h2 class="header-subtitle">by Anna Szałkiewicz</h2>
  </div>
  <div class="container">
    <div class="main-nav">
      <div class="close-header">
        <div class="x-sign">
          <i class="fa fa-window-close-o" aria-hidden="true"></i>
        </div>
      </div>
      <div class="welcome-guide">
        <h2 class="welcome-heading">Welcome to Pixel Art Maker!</h2>
        <ol class="welcome">
          <li>
            Choose canvas size
          </li>
          <li>
            Pick a color
          </li>
          <li>
            Click on Brush tool and start drawing!
          </li>
        </ol>
        <p class="welcome">Hover icon to check its options or click ? icon for more help</p>
      </div>
      <form id="size" class="canvas-size">
        <h2 class="nav-title">Select canvas size:</h2>
        <label>Width:<input id="input-width" type="number" min="10" max="150" value="10"></label>
        <label>Height:<input id="input-height" type="number" min="10" max="150" value="10"></label>
        <button id="submit">Create canvas</button>
      </form>
      <div class="color-picker">
        <h2>Pick up a color</h2>
        <input type="color" class="color-picker-input" id="color-input" autocomplete="on">
      </div>
    </div>
    <div class="arrow-right">
      <i class="fa fa-angle-double-right fa-2x" aria-hidden="true"></i>
    </div>
    <div class="workarea" id="printable-area">
      <nav class="button-nav">
        <div id="save" class="tooltip">
          <i class="fa fa-download fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Save As</span>
        </div>
        <div id="print" class="tooltip">
          <i class="fa fa-print fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Print image</span>
        </div>
        <div id="hide-grid" class="tooltip">
          <i class="fa fa-th fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Hide/Show grid</span>
        </div>
        <div id="grid-size" class="tooltip">
          <div id="grid-size-dropdown" class="dropdown">
            <i class="fa fa-th-large fa-2x fa-fw" aria-hidden="true"></i>
            <div id="grid-size-dropdown-content" class="dropdown-content">
              <p id="small-grid">Small</p>
              <p id="medium-grid">Medium</p>
              <p id="large-grid">Large</p>
            </div>
          </div>
          <span class="tooltip-text">Resize cell size</span>
        </div>
       
        <div id="draw-image" class="tooltip">
          <i class="fa fa-paint-brush fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Brush tool</span>
        </div>
     
        <div id="fill-bucket" class="tooltip">
          <i class="material-icons md-36 fa-fw">format_color_fill</i>
          <span class="tooltip-text">Fill image</span>
        </div>
        <div id="clear-canvas" class="tooltip">
          <i class="fa fa-square-o fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Clear image</span>
        </div>
        <div id="eraser" class="tooltip">
          <i class="fa fa-eraser fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Clear cells</span>
        </div>
        <div id="insert_row" class="tooltip">
          <i class="fa fa-arrows-v fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Make canvas higher</span>
        </div>
        <div id="insert_column" class="tooltip">
          <i class="fa fa-arrows-h fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Make canvas wider</span>
        </div>
        <div id="help" class="tooltip">
          <i class="fa fa-question fa-2x fa-fw" aria-hidden="true"></i>
          <span class="tooltip-text">Help</span>
        </div>
        <div id="help-modal" class="modal">
          <div class="modal-content">
            <span class="close">&times;</span>
            <div class="modal-header">
              <h1 class="modal-heading">How to play Pixel Art Maker?</h1>
            </div>
            <div class="modal-body">
              <ol>
                <li class="modal-list">
                  Select width size (min. value is 10 and max. 150).
                </li>
                <li class="modal-list">
                  To pick up a color click on color block. Window will pop out. Click anywhere on diagram to select color.
                </li>
                <li class="modal-list">
                  Click on brush tool <i class="fa fa-paint-brush" aria-hidden="true"></i> and start painting.
                </li>
              </ol>
              <div class="icons-description">
                <h2 class="modal-heading">Available options</h2>
                <div class="modal-table">
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-download fa-2x fa-fw" aria-hidden="true"></i></i>
                    </div>
                    <div class="modal-table-content">
                      Click to download image to your computer in png format
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-print fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to print out your image.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-th fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to hide / show grid. Grid is visible by default.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-th-large fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to dropdown menu show up. Select small, medium or large option to increase cell size. Small size is selected by default.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <span class="fa-stack fa-fw">
                        <i class="fa fa-paint-brush fa-stack-2x" aria-hidden="true"></i>
                        <i class="fa fa-arrows fa-stack-1x" aria-hidden="true"></i>
                      </span>
                    </div>
                    <div class="modal-table-content">
                      Click and select brush size.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-paint-brush fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to enable brush tool. Click and drag to draw image.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="material-icons md-36 fa-fw">format_color_fill</i>
                    </div>
                    <div class="modal-table-content">
                      Select color and click on icon to fill all canvas with selected color.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-square-o fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to clear canvas.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-eraser fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to enable eraser tool. Click and drag to clear desired cells.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-arrows-h fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to insert additional row to the bottom of canvas.
                    </div>
                  </div>
                  <div class="modal-row">
                    <div class="modal-icon">
                      <i class="fa fa-arrows-v fa-2x fa-fw" aria-hidden="true"></i>
                    </div>
                    <div class="modal-table-content">
                      Click to insert additional column to the right of canvas.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <table id="grid"></table>
      <div id="preview-image">

      </div>
    </div>
  </div>
  <div class="footer">
    <div class="footer-logo">
      <svg version="1.1" class="footer-logo" id="squares" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
        <rect x="1.5" y="1.3" style="fill:#9E2021;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="44.9" height="44.9"/>
        <rect x="53.5" y="1.3" style="fill:#155F60;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="45.1" height="45.1"/>
        <rect x="1.5" y="53.4" style="fill:#6C943E;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="45.1" height="45.1"/>
        <rect x="53.5" y="53.4" style="fill:#1E7F3F;stroke:#000000;stroke-width:3;stroke-miterlimit:10;" width="45.1" height="45.1"/>
      </svg>
      <h1 class="title-footer"><a href="https://mywebgraphicdesign.com" target="_blank">My Web Graphic Design</a></h1>
      <p class="copyright">
        Written and coded by Anna Szalkiewicz. Copyright &copy; 2018 All rights reserved.
      </p>
    </div>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="html2canvas.js"></script>
  <script src="print.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

            
          
!
            
              * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
}
h1 {
  font-family: 'Exo', sans-serif;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  color: #9E2021;
  font-stretch: extra-expanded;
}
a {
  color: #9E2021;
  text-decoration: none;
}
h2 {
  font-family: 'Exo', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #9E2021;
}
p {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  padding: 10px;
}
label {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  display: block;
}
button {
  padding: 10px;
  margin-top: 10px;
  color: #6C943E;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: 500;
  border: solid 3px #6C943E;
  border-radius: 5px;
  background-color: inherit;
  box-shadow: 5px 5px 10px #d2d2d2;
}
button:hover {
  cursor: pointer;
  box-shadow: 5px 5px 5px #d2d2d2;
}
.header {
  width: 100%;
  height: 115px;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 5px #e2e2e2;
  padding: 10px;
  display: block;
  border-bottom: solid 1px #9e2021;
}
.logo {
  width: 100px;
  height: 100px;
  margin-left: 10px;
}
.header-title {
  margin-top: -100px;
  margin-left: 120px;
}
.header-subtitle {
  margin-left: 120px;
  color: #6c943e;
  font-size: 19px;
}
.container {
  width: 100%;
  height: auto;
  display: block;
}
.main-nav {
  display: block;
  width: 100%;
  height: auto;
  padding: 10px;
  background-color: #f2f2f2;
  border-top: solid 1px #e2e2e2;
}
.close-header {
  height: 35px;
}
.x-sign {
  border: solid 1px #e2e2e2;
  float: right;
  padding: 5px;
  color: #c2c2c2;
  margin: -10px;
}
.x-sign:hover {
  cursor: pointer;
  color: #b2b2b2;
}
.arrow-right {
  display: none;
  position: absolute;
  margin-left: -30px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 10px 10px 30px;
  border-radius: 50%;
  top: 40%;
  z-index: 100000;
}
.arrow-right:hover {
  cursor: pointer;
}
.welcome-guide {
  margin-top: -30px;
}
.welcome-heading {
  font-family: 'Exo', sans-serif;
  text-align: center;
  padding: 10px;
}
.welcome {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  padding: 10px;
}
.canvas-size {
  padding: 30px 10px 30px 10px;
  text-align: center;
  border-top: solid 1px #e2e2e2;
  border-bottom: solid 1px #e2e2e2;
}
.nav-title {
  margin-bottom: 10px;
}
#input-width, #input-height {
  padding: 10px;
  width: 90px;
  margin-left: 5px;
  margin-bottom: 10px;
  border: solid 1px #9E2021;
  border-radius: 5px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
}
.color-picker {
  text-align: center;
  padding: 20px 10px 30px 10px;
  border-bottom: solid 1px #e2e2e2;
}
.color-picker-input {
  width: 100%;
  height: 50px;
  padding: 6px;
  margin-top: 10px;
  border: solid 1px #9E2021;
  border-radius: 5px;
}

/* CONTAINER  */

.workarea {
  width: 100% !important;
  margin: 10px auto;
  background-color: #f2f2f2;
  box-shadow: 5px 5px 5px #e2e2e2;
  border-top: solid 1px #e2e2e2;
  border-left: solid 1px #e2e2e2;
  padding: 10px;
  overflow-x: auto;
  overflow-y: auto;
  background-image: url('background.png');
  background-size: 300px auto;
  background-position: bottom right;
  background-repeat: no-repeat;
}
canvas {
  display: none;
}

/* BUTTON MENU */

.button-nav {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltip-text {
    visibility: hidden;
    width: 100px;
    background-color: #fff;
    color: #9e2021;
    text-align: center;
    border: solid 1px #9e2021;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -40px;
    margin-top: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent #9e2021 transparent;
}
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
.fa-fw {
  width: 50px !important;
  height: 50px;
  border: solid 1px #9e2021;
  border-radius: 5px;
  color: #9e2021;
  padding: 9px 5px;
  background-color: #fff;
  box-shadow: 5px 5px 10px #9f9f9f;
  margin: 10px 0px 0px 20px;
}
.fa-fw:hover {
  cursor: pointer;
  box-shadow: 5px 5px 5px #9f9f9f;
}
.fa-stack-1x {
  margin: -9px;
}
.md-36 {
  font-size: 30px;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  width: 90px;
  background-color: #fff;
  border: solid 1px #9e2021;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 5px;
  z-index: 100000;
}
.dropdown-content p {
  display: block;
  color: #9e2021;
}
.show {
  display: block;
}
.dropdown:hover .dropdown-content p {
    display: block;
}
.dropdown-content p:hover {
  cursor: pointer;
  background-color: #9e2021;
  color: #fff;
}
/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
   background-color: #fefefe;
   margin: 3% auto;
   padding: 20px;
   border: 1px solid #888;
   width: 95%;
   font-family: 'Montserrat', sans-serif;
   font-size: 16px;
   font-weight: 400;
}

/* The Close Button */
.close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
}

.close:hover,
.close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
}
.modal-row {
  width: 100%;
  height: 100px;
}
.modal-table {
  width: 100%;
}
.modal-header {
  padding: 20px 20px 30px 20px;
  border-bottom: solid 1px #f2f2f2;
}
.modal-heading {
  font-size: 28px;
  text-align: center;
  margin-top: 10px;
}
.modal-body {
  margin: 0 10px;
}
.modal-icon {
  width: 10%;
  border-bottom: solid 1px #f2f2f2;
  margin-left: -40px;
  padding: 10px;
}
.modal-table-content {
  width: 65%;
  position: absolute;
  margin-left: 55px;
  margin-top: -60px;
  font-size: 14px;
}
.modal-table:hover, .modal-icon:hover, .modal-table-content:hover {
  cursor: pointer;
  background-color: #fff;
}
/* GRID  */

table {
  margin: 10px auto;
  background-color: #fff;
  border: solid 1px #e2e2e2;
  box-shadow: 5px 5px 5px #e2e2e2;
  cursor: crosshair;
  border-collapse: collapse;
}
td {
  width: 10px;
  height: 10px;
  border-collapse: collapse;
}
td:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.border {
  border: solid 1px #e2e2e2;
}
/* FOOTER */

.footer {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;
  display: inline;
  border-top: solid 1px #d2d2d2;
  position: relative;
  bottom: 0;
}
.footer-logo {
  height: 40px;
  margin-top: 5px;
  text-align: center;
}
.title-footer {
  font-size: 24px;
  vertical-align: bottom;
  display: inline-block;
}
.copyright {
  text-align: center;
  margin-top: 5px;
}
.active {
  width: 50px;
  height: 50px;
  border: solid 3px #9e2021;
  
}
@media (min-width: 360px) {
  label {
    display: inline-block;
  }
  .button-nav {
    margin: 0 20px;
  }
}
@media (min-width: 576px) {
  h1 {
    font-size: 62px;
  }
  .head-subtitle {
    font-size: 20px;
  }
}
@media (min-width: 980px) {
  .header-subtitle {
    font-size: 24px;
    margin-top: -9px;
  }
  .container {
    display: flex;
  }
  .main-nav {
    width: 30%;
  }
  .workarea {
    width: 70%;
  }
  .footer {
    height: 100px;
    position: fixed;
  }
  .modal-list {
    margin-left: 45px;
  }
  .modal-row {
    height: 60px;
  }
  .modal-icon {
    margin-left: 0;
  }
  .modal-table-content {
    margin: -50px auto auto 100px;
    font-size: 16px;
  }

}
@media (min-width: 1280px) {
  table {
    margin: 20px auto;
  }
  .main-nav {
    width: 25%;
  }
  .footer {
    height: 60px;
    position: relative;
  }
  .footer-logo {
    text-align: left;
    margin-left: 10px;
  }
  .copyright {
    text-align: right;
    margin-top: -42px;
  }
  .title-footer {
    margin-top: 12px;
    vertical-align: top;
  }
}
@media (min-width: 1920px) {
  .footer {
    position: fixed;
  }
  .main-nav {
    width: 20%;
    margin: 20px;
    box-shadow: 5px 5px 5px #e2e2e2;
  }
  .workarea {
    width: 80%;
    margin: 20px;
  }
}
@media print {
    body {
        -webkit-print-color-adjust: exact; /*Chrome, Safari */
        color-adjust: exact; /*Firefox*/
    }
    td {
      -webkit-print-color-adjust: exact; /*Chrome, Safari */
      color-adjust: exact; /*Firefox*/
    }
    .border {
      display: none;
    }
}

            
          
!
            
              function makeGrid(row, cell) {
  const width = $("#input-width").val();
  const height = $("#input-height").val();
  const table = $("#grid");

  table.empty(); //clear table

  for (let row = 1; row <= height; row++) {
    table.append("<tr></tr>");
    for (let cell = 1; cell <= width; cell++) {
      table
        .children()
        .last()
        .append("<td></td>");
    }
  }
  $("td").addClass("border");
}
function init() {
  $("#size").submit(function(event) {
  event.preventDefault();
  makeGrid();
});
};

$(document).ready(init);

$("#draw-image").on("click", function() {
  //COLOR SINGLE CELL

  $("#grid").on("mousedown", "td", "tr", function(event) {
    let color = $("#color-input").val(); //select color
    event.preventDefault();
    $(this).css("background-color", color);

    //COLOR MULTIPLY CELLS

    $("#grid").on("mouseenter", "td", "tr", function(event) {
      event.preventDefault();
      let color = $("#color-input").val(); //select color
      $(event.target).css("background-color", color);
      $("body").on("mouseup", function() {
        $("#grid").off("mouseenter");
      });
    });
  });
});

//FILL CANVAS WITH SELECTED COLOR

$("#fill-bucket").on("click", function(event) {
  let color = $("#color-input").val(); //select color
  event.preventDefault();
  $("td").css("background-color", color);
});

//HIDE / SHOW GRID

$("#hide-grid").on("click", function() {
  $("td").toggleClass("border");
});

// CLEAR CANVAS

$("#clear-canvas").on("click", function() {
  // $('.fa-square-o').toggleClass('active');
  $("td").css("background-color", "#fff");
});

//CLEAR MULTIPLY CELLS

$("#eraser").on("click", function() {
  //CLEAR SINGLE CELL

  $("#grid").on("mousedown", "td", function(event) {
    $(this).css("background-color", "#fff");

    //CLEAR MULTIPLY CELLS

    $("#grid").on("mouseenter", "td", function(event) {
      event.preventDefault();
      $(event.target).css("background-color", "#fff");
      $("#grid").on("mouseup mouseleave", function(event) {
        $("#grid").off("mouseenter");
      });
    });
  });
});

//SAVE TABLE AS IMAGE png

$("#save").on("click", function() {
  html2canvas(document.querySelector("table")).then(canvas => {
    document.querySelector(".workarea").append(canvas);

    // save canvas image as data url (png format by default)
    const img = canvas.toDataURL();

    function saveAs(uri, filename) {
      const link = document.createElement("a");
      if (typeof link.download === "string") {
        document.body.appendChild(link); // Firefox requires the link to be in the body
        link.download = filename;
        link.href = uri;
        link.click();
        document.body.removeChild(link); // remove the link when done
      } else {
        location.replace(uri);
      }
    }
    const uri = img.replace(
      /^data:image\/[^;]/,
      "data:application/octet-stream"
    );
    //window.open(url);
    saveAs(uri, "pixel-art-image.png");
  });
});

//SELECT CELL SIZE

$("#small-grid").on("click", function() {
  $("td").css({ width: "10px", height: "10px" });
});
$("#medium-grid").on("click", function() {
  $("td").css({ width: "15px", height: "15px" });
});
$("#large-grid").on("click", function() {
  $("td").css({ width: "20px", height: "20px" });
});

// PRINTING CANVAS

function printCanvas() {
  html2canvas(document.querySelector("table")).then(canvas => {
    document.querySelector(".workarea").append(canvas);
    $("canvas").attr("id", "printable");

    var dataUrl = document.querySelector("#printable").toDataURL(); //attempt to save base64 string to server using this var
    var windowContent = "<!DOCTYPE html>";
    windowContent += "<html>";
    windowContent += "<head><title>Print canvas</title></head>";
    windowContent += "<body>";
    windowContent += '<img src="' + dataUrl + '">';
    windowContent += "</body>";
    windowContent += "</html>";
    var printWin = window.open("", "", "width=340,height=260");
    printWin.document.open();
    printWin.document.write(windowContent);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
  });
}
$("#print").on("click", function() {
  printCanvas();
});

// EYEDROPPER TOOL TO DO

function processSettings() {
  // diplay settings
  $("#grid").css("background-color", localStorage.setItem("background-color"));
  // // tools setup
  setTool(parseInt(localStorage.getItem("#color-input")));
  // color picker setup
  $("#color-input").val(localStorage.getItem("#color-input"));
  // $('#color-input').trigger( "change" );
}

//Invert colors TO DO
$("#invert").on("click", function() {
  tdlist.each(function() {
    let tdcolor = $(this).css("background-color");
    let parts = tdcolor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete parts[0];
    let newr = 255 - parts[1];
    let newg = 255 - parts[2];
    let newb = 255 - parts[3];
    let tdnewcolor = "rgb(" + newr + "," + newg + "," + newb + ")";
    $(this).css("background-color", tdnewcolor);
  });
});

// ADD ROW

$("#insert_row").on("click", function(event) {
  event.preventDefault();
  const table = $("#grid");
  $("tr")
    .last()
    .clone()
    .appendTo(table);
  $("tr:last-child td").css("background-color", "#fff");
});

// ADD column

$("#insert_column").on("click", function(event) {
  event.preventDefault();
  const table = $("#grid");
  $("td")
    .last()
    .clone()
    .appendTo("tr");
  $("td:last-child").css("background-color", "#fff");
});

// DETECT MOUSE POSITION

// HIDE / SHOW MAIN NAVIGATION

$(".x-sign").click(function() {
  $(".main-nav").css("display", "none");
  $(".x-sign").css("display", "none");
  $(".arrow-right").css("display", "block");
  $(".workarea").css("width", "100%");
});
$(".arrow-right").click(function() {
  $(".main-nav").css("display", "block");
  $(".x-sign").css("display", "block");
  $(".arrow-right").css("display", "none");
  $(".workarea").css("width", "80%");
});

// SHOW DROPDOWN MENU CONTENT

$("#grid-size-dropdown").on("click", function() {
  // SHOW / HIDE GRID SIZE DROPDOWN
  $("#grid-size-dropdown-content").toggleClass("show");
});

$("#brush-size").on("click", function() {
  $("#input-brush").toggleClass("show");
});

// OPEN MODAL

// Get the modal
const modal = document.getElementById("help-modal");

// Get the button that opens the modal
const btn = document.getElementById("help");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console