cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              
<div id="PA_Container">
  <h1><strong>Four Hundred</strong> Squares</h1>
  <canvas id="myCanvas" width="500px" height="500px"></canvas>
  <div id="console"></div>
  

  <div id="saveContainer" style="display:none;">
    <div id="closeSaved">X</div>
    <div id="savedImageFrame">

    </div>
  </div>

  <div id="palette">

    <ul>
      <li class="paletteColour" title="Pale Yellow" style="background-color:#F3ECCC"></li>
      <li class="paletteColour" title="Pastel Yellow" style="background-color:#E7D899"></li>
      <li class="paletteColour" title="Sandy Yellow" style="background-color:#DAC566"></li>
      <li class="paletteColour" title="Gold" style="background-color:#CEB233"></li>
      <li class="paletteColour" title="Burnt Yellow" style="background-color:#C29F00"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Pale Orange" style="background-color:#FBE0CC"></li>
      <li class="paletteColour" title="Pastel Orange" style="background-color:#F8C299"></li>
      <li class="paletteColour" title="Medium Orange" style="background-color:#F4A366"></li>
      <li class="paletteColour" title="Citrus Orange" style="background-color:#F18533"></li>
      <li class="paletteColour" title="Pure Orange" style="background-color:#ED6600"></li>
    </ul>
     <ul>
      <li class="paletteColour" title="Pale Red" style="background-color:#EED1CC"></li>
      <li class="paletteColour" title="Pastel Red" style="background-color:#DCA299"></li>
      <li class="paletteColour" title="Light Red" style="background-color:#CB7466"></li>
      <li class="paletteColour" title="Royal Red" style="background-color:#BA4533"></li>
      <li class="paletteColour" title="Rose Red" style="background-color:#A81700"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Pale Green" style="background-color:#D8E6CC"></li>
      <li class="paletteColour" title="Pastel Green" style="background-color:#B1CC99"></li>
      <li class="paletteColour" title="Light Green" style="background-color:#8BB366"></li>
      <li class="paletteColour" title="Grass Green" style="background-color:#649933"></li>
      <li class="paletteColour" title="Swamp Green" style="background-color:#3D8000"></li>
    </ul>
     <ul>
      <li class="paletteColour" title="Ocean Green" style="background-color:#CCE6DC"></li>
      <li class="paletteColour" title="Misty Green" style="background-color:#99CCB9"></li>
      <li class="paletteColour" title="Tranquil Green" style="background-color:#66B396"></li>
      <li class="paletteColour" title="Corporate Green" style="background-color:#339973"></li>
      <li class="paletteColour" title="Forest Green" style="background-color:#008050"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Ice Blue" style="background-color:#CCDEE5"></li>
      <li class="paletteColour" title="Subtle Blue" style="background-color:#99BECB"></li>
      <li class="paletteColour" title="Corporate Blue" style="background-color:#669DB1"></li>
      <li class="paletteColour" title="City Blue" style="background-color:#337D97"></li>
      <li class="paletteColour" title="Dark Blue" style="background-color:#005C7D"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Pale Blue" style="background-color:#CCD4E6"></li>
      <li class="paletteColour" title="Pastel Blue" style="background-color:#99AACC"></li>
      <li class="paletteColour" title="Sky Blue" style="background-color:#667FB3"></li>
      <li class="paletteColour" title="Ocean Blue" style="background-color:#335499"></li>
      <li class="paletteColour" title="Midnight Blue" style="background-color:#002A80"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Pale Purple" style="background-color:#D8CCE0"></li>
      <li class="paletteColour" title="Pastel Purple" style="background-color:#B199C2"></li>
      <li class="paletteColour" title="Rich Purple" style="background-color:#8A66A3"></li>
      <li class="paletteColour" title="Royal Purple" style="background-color:#633385"></li>
      <li class="paletteColour" title="Dark Purple" style="background-color:#3C0066"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Flower Pink" style="background-color:#EAB4D2"></li>
      <li class="paletteColour" title="Icecream Pink" style="background-color:#DF8FBB"></li>
      <li class="paletteColour" title="Party Pink" style="background-color:#D569A5"></li>
      <li class="paletteColour" title="Medium Pink" style="background-color:#CF5799"></li>
      <li class="paletteColour" title="Dark Pink" style="background-color:#CA448E"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Light Brown" style="background-color:#E7D8CC"></li>
      <li class="paletteColour" title="Pale Brown" style="background-color:#CFB199"></li>
      <li class="paletteColour" title="Tea Brown" style="background-color:#B78A66"></li>
      <li class="paletteColour" title="Soil Brown" style="background-color:#9F6333"></li>
      <li class="paletteColour" title="Warm Brown" style="background-color:#873C00"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Pottery Brown" style="background-color:#C4A999"></li>
      <li class="paletteColour" title="Fair Brown" style="background-color:#A67E66"></li>
      <li class="paletteColour" title="Medium Brown" style="background-color:#895433"></li>
      <li class="paletteColour" title="Woodland Brown" style="background-color:#7A3E1A"></li>
      <li class="paletteColour" title="Rich Brown" style="background-color:#6B2900"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Light Pink" style="background-color:#E4C5BD"></li>
      <li class="paletteColour" title="Pastel Pink" style="background-color:#D7A89C"></li>
      <li class="paletteColour" title="Warm Pink" style="background-color:#CA8B7B"></li>
      <li class="paletteColour" title="Makeup Pink" style="background-color:#C37C6A"></li>
      <li class="paletteColour" title="Shaded Pink" style="background-color:#BD6D5A"></li>
    </ul>
    
    <ul>
      <li class="paletteColour" title="Light Grey" style="background-color:#E6E6E6"></li>
      <li class="paletteColour" title="Natural Grey" style="background-color:#B3B3B3"></li>
      <li class="paletteColour" title="Medium Grey" style="background-color:#878787"></li>
      <li class="paletteColour" title="Metal Grey" style="background-color:#666666"></li>
      <li class="paletteColour" title="Dark Grey" style="background-color:#4D4D4D"></li>
    </ul>
     <ul>
      <li class="paletteColour" title="Bright Yellow" style="background-color:#FFF800"></li>
      <li class="paletteColour" title="Bright Orange" style="background-color:#FF7900"></li>
      <li class="paletteColour" title="Bright Red" style="background-color:#FF0000"></li>
      <li class="paletteColour" title="Bright Lime" style="background-color:#3DF700"></li>
      <li class="paletteColour" title="Bright Cyan" style="background-color:#00EDFF"></li>
    </ul>
    <ul>
      <li class="paletteColour" title="Bright Blue" style="background-color:#0000FF"></li>
      <li class="paletteColour" title="Bright Pink" style="background-color:#FF00E1"></li>
      <li class="paletteColour" title="Bright Purple" style="background-color:#9B00FF"></li>
      <li class="paletteColour" title="White" style="background-color:#FFFFFF"></li>
      <li class="paletteColour" title="Black" style="background-color:#000000"></li>
    </ul>
    
    <div id="save">Save</div>
    <div id="clear">Clear</div>
  </div>
</div>
            
          
!
            
              body{
 background: #f1f1f1;
  font-size:100%;
}

h1{
  font-family: 'Oswald', sans-serif;
  font-weight:300;
  color:#ccc;
  font-size:2.5em;
  text-transform:uppercase;
  margin:0.4em 0em;
}

strong{
 font-weight:700;
}

#PA_Container{
 width:700px; 
margin:0 auto;
}

#myCanvas{
  box-shadow:0px 0px 5px #333;
}
#myCanvas:hover{
cursor:crosshair;
}

#console{
  width:200px;
  height:200px;
  padding:10px;
  position:absolute;
  right:0px;
  top:0px;
  border:1px solid black;
  display:none;
  background:white;
}

#save, #closeSaved, #clear{
  background:linear-gradient(to bottom, #39b54a 0%,#197b30 100%);
  color:white;
  text-shadow:0px 1px 1px #005e20;
  font-size:16px;
  padding:5px;
  clear:both;
  font-family:Arial,Helvetica,sans-serif;
  text-align:center;
  margin-top:10px;
  cursor:pointer;
}

#clear{
  background:linear-gradient(to bottom, #ed1c24 0%,#9e0b0f 100%);
  text-shadow:0px 1px 1px #790000;
}

#save:hover, #closeSaved:hover{
background:#39b54a;
}

#clear:hover{
background:#ed1c24;
}

#palette{
 /* box-shadow:0px 0px 5px #333;
  background-color:#ccc;
  padding:10px;*/
  float:right;
  
}

#palette li{
  list-style:none;
  display:inline-block;
  width:20px;
  height:20px;
  
  -webkit-transition:-webkit-transform 0.2s;
   transition:transform 0.2s;
}

#palette li:hover{
  cursor:pointer;
  -webkit-transform:scale(1.5,1.5); /* Chrome, Safari, Opera */
transform:scale(1.5,1.5); /* Standard syntax */
}

#palette ul{
  margin:0px;
  padding:0px;
  /*float:left;*/
  clear:both;
}


#saveContainer{
  position:absolute;
  box-shadow:0px 0px 15px black;
  z-index:1;
  left:50%;
  top:50%;
  width:500px;
  height:500px;
  margin-left:-250px;
  margin-top:-250px;
  border:5px white solid;
}

#closeSaved{
  position:absolute;
  z-index:2;
  top:-23px;
  right:-16px;
  width:15px;
  display:block;
}

            
          
!
            
              window.onload = function(){

  var console = document.getElementById("console");
  var saveButton = document.getElementById("save");
  var clearButton = document.getElementById("clear");
  var savedImageFrame = document.getElementById("savedImageFrame");
  var saveContainer = document.getElementById("saveContainer");
  var closeButton = document.getElementById("closeSaved");
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  var currentColour = "#000000";
  var leftMouseDown = 0;
  
  c.addEventListener("mousedown", mouseClick, false);
  c.addEventListener("mouseup", mouseUp, false);
  c.addEventListener("mousemove", mouseHover, false);
  c.addEventListener("mouseleave", mouseExit, false);
  saveButton.addEventListener("click", saveCanvas, false);
  closeButton.addEventListener("click", closeSavedImg, false);
  clearButton.addEventListener("click", clearCanvas, false);
  
  var pCol = document.getElementsByClassName("paletteColour");
  //assign events listeners to the colour swatches
  for(var cc=0; cc < pCol.length; cc++){
    pCol[cc].addEventListener("click", colSelect, false);
  }
  
  //populate the canvas with a grid of square objects
  
  function tile(color,pX,pY,scale){
    this.color = color;
    this.pX = pX;
    this.pY = pY;
    this.scale = scale;
    ctx.fillStyle = this.color;
    ctx.fillRect(pX,pY,scale,scale);
    this.recolour = recolour;
    this.redraw = redraw;
    
    function recolour(newColour){
      this.color = newColour;
      this.redraw();
    }
    
    function redraw(){
      ctx.fillStyle = this.color;
      ctx.fillRect(pX,pY,scale,scale);
    }
  }
  
  var tiles = [];  
  
  for(var x=0; x < 20; x++){
    for(var y=0; y < 20; y++){
      //seems you have to initiate the arrrys within the array
       tiles.push([]); //initiate array to go within tiles array.
        tiles[x][y] = new tile("#ffffff",x*25,y*25,25);  
    }
  }
  
  function mouseUp(e){
    leftMouseDown = 0;
  }
  
  function mouseClick(e){
    if(e.button == 0){leftMouseDown = 1;} 
    paintCanvas(e);
  }
  
  function mouseHover(e){
    if(leftMouseDown == 1){
    paintCanvas(e);
    }
  } // end mouseHover function
  
  function mouseExit(e){
    leftMouseDown = 0;
  }
  
  function paintCanvas(e){
        var cMouseX = (e.clientX - c.offsetLeft) + window.pageXOffset;
    var cMouseY = (e.clientY - c.offsetTop) + window.pageYOffset;
    console.innerHTML = cMouseX + " " + cMouseY;
    console.innerHTML += "<br>" + tiles[10][16].pX + " " + tiles[10][16].pY;
    console.innerHTML += "<br>" + window.pageXOffset;
    
    for(var xi=0; xi < 20; xi++){
      for(var yi=0; yi < 20; yi++){
        if(cMouseX >= tiles[xi][yi].pX && cMouseX < tiles[xi][yi].pX + 25 && cMouseY >= tiles[xi][yi].pY && cMouseY < tiles[xi][yi].pY + 25){
          tiles[xi][yi].recolour(currentColour);
        }
      }
    } // end loop
  }
  
  function colSelect(e){
    currentColour = e.currentTarget.style.backgroundColor;
  }

  function saveCanvas(e){
    if(saveContainer.style.display == "none"){
      saveContainer.style.display = "block"
    }
    
    //Delete any previous saves images
    if(savedImageFrame.hasChildNodes()){
      savedImageFrame.removeChild(savedImageFrame.childNodes[0]);
    }
    var savedImg = document.createElement("img"); // Create <img> tag
    savedImg.src = c.toDataURL(); //set source as canvas data
    savedImageFrame.appendChild(savedImg); // Append it to the document
  }
  
  
   function clearCanvas(e){
    for(var xi=0; xi < 20; xi++){
      for(var yi=0; yi < 20; yi++){
          tiles[xi][yi].recolour(currentColour);
      }
    } // end loop 
  }
  
  function closeSavedImg(e){
     if(saveContainer.style.display == "block"){
      saveContainer.style.display = "none"
    }
  }

} //end- window.onload
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console