Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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

            
              <canvas id="ark" width="136" height="248"></canvas>
            
          
!

CSS

            
              body {
  background-color: #333333;
}

#ark {
  width: 136px;
  height: 248px;
  margin: 20px auto;
  display: block;
}
            
          
!

JS

            
               var canvas = document.getElementById('ark');
if (canvas.getContext) {
 var ctx = canvas.getContext("2d");
  
  // Row 1
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(48,0,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(56,0,8,8);
  ctx.fillRect(64,0,8,8);
  ctx.fillStyle = "rgb(207,162,59)";
  ctx.fillRect(72,0,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(80,0,8,8);
  
  // Row 2
  ctx.fillRect(32,8,8,8);
  ctx.fillRect(40,8,8,8);
  ctx.fillRect(48,8,8,8);
  ctx.fillStyle = "rgb(207,162,59)";
  ctx.fillRect(56,8,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(64,8,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(72,8,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(80,8,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(88,8,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(96,8,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(104,8,8,8);
  
  // Row 3
  ctx.fillRect(8,16,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(16,16,8,8);
  ctx.fillStyle = "rgb(207,162,59)";
  ctx.fillRect(24,16,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(32,16,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(40,16,8,8);
  ctx.fillRect(48,16,8,8);
  ctx.fillStyle = "rgb(113,89,32)";
  ctx.fillRect(56,16,8,8);
  ctx.fillRect(64,16,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(72,16,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(80,16,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(88,16,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(96,16,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(104,16,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(112,16,8,8);
  
  // Row 4
  ctx.fillRect(16,24,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(24,24,8,8);
  ctx.fillRect(32,24,8,8);
  ctx.fillRect(40,24,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(48,24,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(56,24,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(64,24,8,8);
  ctx.fillRect(72,24,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(80,24,8,8);
  ctx.fillStyle = "rgb(250,235,200)";
  ctx.fillRect(88,24,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(96,24,8,8);
  ctx.fillRect(104,24,8,8);
  ctx.fillRect(112,24,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(120,24,8,8);
  
  // Row 5
  ctx.fillRect(24,32,8,8);
  ctx.fillRect(32,32,8,8);
  ctx.fillStyle = "rgb(113,89,32)";
  ctx.fillRect(40,32,8,8);
  ctx.fillStyle = "rgb(250,235,200)";
  ctx.fillRect(48,32,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(56,32,8,8);
  ctx.fillStyle = "rgb(113,89,32)";
  ctx.fillRect(64,32,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(72,32,8,8);
  ctx.fillRect(80,32,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(88,32,8,8);
  ctx.fillStyle = "rgb(250,235,200)";
  ctx.fillRect(96,32,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(104,32,8,8);
  ctx.fillRect(112,32,8,8);
  
  // Row 6
  ctx.fillRect(24,40,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(32,40,8,8);
  ctx.fillStyle = "rgb(250,235,200)";
  ctx.fillRect(40,40,8,8);
  ctx.fillRect(48,40,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(56,40,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(64,40,8,8);
  ctx.fillStyle = "rgb(169,133,48)";
  ctx.fillRect(72,40,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(80,40,8,8);
  ctx.fillRect(88,40,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(96,40,8,8);
  ctx.fillRect(104,40,8,8);
  
  // Row 7
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(16,48,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(24,48,8,8);
  ctx.fillRect(32,48,8,8);
  ctx.fillRect(40,48,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(48,48,8,8);
  ctx.fillRect(56,48,8,8);
  ctx.fillStyle = "rgb(175,72,72)";
  ctx.fillRect(64,48,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(72,48,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(80,48,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(88,48,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(96,48,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(104,48,8,8);
  
  // Row 8
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(8,56,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(16,56,8,8);
  ctx.fillRect(24,56,8,8);
  ctx.fillRect(32,56,8,8);
  ctx.fillRect(40,56,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(48,56,8,8);
  ctx.fillStyle = "rgb(175,72,72)";
  ctx.fillRect(56,56,8,8);
  ctx.fillRect(64,56,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(72,56,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(80,56,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(88,56,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(96,56,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(104,56,8,8);
  
  // Row 9
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(24,64,8,8);
  ctx.fillRect(32,64,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(40,64,8,8);
  ctx.fillRect(48,64,8,8);
  ctx.fillStyle = "rgb(216,169,144)";
  ctx.fillRect(56,64,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(64,64,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(72,64,8,8);
  ctx.fillRect(80,64,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(88,64,8,8);
  ctx.fillRect(96,64,8,8);
  
  // Row 10
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(16,72,8,8);
  ctx.fillRect(24,72,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(32,72,8,8);
  ctx.fillStyle = "rgb(255,255,255)";
  ctx.fillRect(40,72,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(48,72,8,8);
  ctx.fillStyle = "rgb(247,193,165)";
  ctx.fillRect(56,72,8,8);
  ctx.fillRect(64,72,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(72,72,8,8);
  ctx.fillStyle = "rgb(255,255,255)";
  ctx.fillRect(80,72,8,8);
  ctx.fillStyle = "rgb(130,102,37)";
  ctx.fillRect(88,72,8,8);
  ctx.fillStyle = "rgb(53,41,15)";
  ctx.fillRect(96,72,8,8);
  
  // Row 11
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(8,80,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(16,80,8,8);
  ctx.fillRect(24,80,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(32,80,8,8);
  ctx.fillStyle = "rgb(255,255,255)";
  ctx.fillRect(40,80,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(48,80,8,8);
  ctx.fillStyle = "rgb(247,193,165)";
  ctx.fillRect(56,80,8,8);
  ctx.fillRect(64,80,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(72,80,8,8);
  ctx.fillStyle = "rgb(255,255,255)";
  ctx.fillRect(80,80,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(88,80,8,8);
  ctx.fillRect(96,80,8,8);
  ctx.fillRect(104,80,8,8);
  ctx.fillRect(112,80,8,8);
  
  // Row 12
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(0,88,8,8);
  ctx.fillStyle = "rgb(157,123,45)";
  ctx.fillRect(8,88,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(16,88,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(24,88,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(32,88,8,8);
  ctx.fillStyle = "rgb(144,112,96)";
  ctx.fillRect(40,88,8,8);
  ctx.fillStyle = "rgb(216,169,144)";
  ctx.fillRect(48,88,8,8);
  ctx.fillStyle = "rgb(247,193,165)";
  ctx.fillRect(56,88,8,8);
  ctx.fillRect(64,88,8,8);
  ctx.fillStyle = "rgb(216,169,144)";
  ctx.fillRect(72,88,8,8);
  ctx.fillStyle = "rgb(144,112,96)";
  ctx.fillRect(80,88,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(88,88,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(96,88,8,8);
  ctx.fillRect(104,88,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(112,88,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,88,8,8);
  
  // Row 13
  ctx.fillRect(0,96,8,8);
  ctx.fillStyle = "rgb(190,149,54)";
  ctx.fillRect(8,96,8,8);
  ctx.fillStyle = "rgb(157,123,45)";
  ctx.fillRect(16,96,8,8);
  ctx.fillRect(24,96,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(32,96,8,8);
  ctx.fillStyle = "rgb(207,162,59)";
  ctx.fillRect(40,96,8,8);
  ctx.fillStyle = "rgb(144,112,96)";
  ctx.fillRect(48,96,8,8);
  ctx.fillRect(56,96,8,8);
  ctx.fillRect(64,96,8,8);
  ctx.fillRect(72,96,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(80,96,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(88,96,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(96,96,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(104,96,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(112,96,8,8);
  ctx.fillStyle = "rgb(157,123,45)";
  ctx.fillRect(120,96,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(128,96,8,8);
  
  // Row 14
  ctx.fillStyle = "rgb(21,20,20)";
  ctx.fillRect(8,104,8,8);
  ctx.fillStyle = "rgb(93,73,26)";
  ctx.fillRect(16,104,8,8);
  ctx.fillRect(24,104,8,8);
  ctx.fillStyle = "rgb(21,20,20)";
  ctx.fillRect(32,104,8,8);
  ctx.fillStyle = "rgb(207,162,59)";
  ctx.fillRect(40,104,8,8);
  ctx.fillRect(48,104,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(56,104,8,8);
  ctx.fillRect(64,104,8,8);
  ctx.fillRect(72,104,8,8);
  ctx.fillRect(80,104,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(88,104,8,8);
  ctx.fillStyle = "rgb(157,123,45)";
  ctx.fillRect(96,104,8,8);
  ctx.fillStyle = "rgb(190,149,54)";
  ctx.fillRect(104,104,8,8);
  ctx.fillRect(112,104,8,8);
  ctx.fillStyle = "rgb(157,123,45)";
  ctx.fillRect(120,104,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(128,104,8,8);
  
  // Row 15
  ctx.fillStyle = "rgb(21,20,20)";
  ctx.fillRect(8,112,8,8);
  ctx.fillStyle = "rgb(246,192,164)";
  ctx.fillRect(16,112,8,8);
  ctx.fillRect(24,112,8,8);
  ctx.fillStyle = "rgb(21,20,20)";
  ctx.fillRect(32,112,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(40,112,8,8);
  ctx.fillStyle = "rgb(207,162,59)";
  ctx.fillRect(48,112,8,8);
  ctx.fillStyle = "rgb(238,187,68)";
  ctx.fillRect(56,112,8,8);
  ctx.fillRect(64,112,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,112,8,8);
  ctx.fillRect(80,112,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(88,112,8,8);
  ctx.fillStyle = "rgb(93,73,26)";
  ctx.fillRect(96,112,8,8);
  ctx.fillRect(104,112,8,8);
  ctx.fillRect(112,112,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,112,8,8);
  
  // Row 16
  ctx.fillStyle = "rgb(21,20,20)";
  ctx.fillRect(8,120,8,8);
  ctx.fillStyle = "rgb(246,192,164)";
  ctx.fillRect(16,120,8,8);
  ctx.fillStyle = "rgb(173,135,116)";
  ctx.fillRect(24,120,8,8);
  ctx.fillStyle = "rgb(21,20,20)";
  ctx.fillRect(32,120,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(40,120,8,8);
  ctx.fillRect(48,120,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,120,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(64,120,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(72,120,8,8);
  ctx.fillRect(80,120,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(88,120,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(96,120,8,8);
  ctx.fillStyle = "rgb(173,135,115)";
  ctx.fillRect(104,120,8,8);
  ctx.fillStyle = "rgb(246,192,164)";
  ctx.fillRect(112,120,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,120,8,8);
  
  // Row 17
  ctx.fillRect(0,128,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(8,128,8,8);
  ctx.fillRect(16,128,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(24,128,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(32,128,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(40,128,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(48,128,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,128,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(64,128,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,128,8,8);
  ctx.fillRect(80,128,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(88,128,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(96,128,8,8);
  ctx.fillStyle = "rgb(173,135,115)";
  ctx.fillRect(104,128,8,8);
  ctx.fillRect(112,128,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(120,128,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(128,128,8,8);
  
  // Row 18
  ctx.fillRect(0,136,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(8,136,8,8);
  ctx.fillRect(16,136,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(24,136,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(32,136,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(40,136,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(48,136,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,136,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(64,136,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,136,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(80,136,8,8);
  ctx.fillRect(88,136,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(96,136,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(104,136,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(112,136,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(120,136,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(128,136,8,8);
  
  // Row 19
  ctx.fillRect(0,144,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(8,144,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(16,144,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(24,144,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(32,144,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(40,144,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(48,144,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,144,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(64,144,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,144,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(80,144,8,8);
  ctx.fillRect(88,144,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(96,144,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(104,144,8,8);
  ctx.fillRect(112,144,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(120,144,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(128,144,8,8);
  
  // Row 20
  ctx.fillRect(8,152,8,8);
  ctx.fillRect(16,152,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(24,152,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(32,152,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(40,152,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(48,152,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,152,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(64,152,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,152,8,8);
  ctx.fillStyle = "rgb(252,114,96)";
  ctx.fillRect(80,152,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(88,152,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(96,152,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(104,152,8,8);
  ctx.fillRect(112,152,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,152,8,8);
  
  // Row 21
  ctx.fillRect(16,160,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(24,160,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(32,160,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(40,160,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(48,160,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,160,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(64,160,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,160,8,8);
  ctx.fillStyle = "rgb(252,114,96)";
  ctx.fillRect(80,160,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(88,160,8,8);
  ctx.fillRect(96,160,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(104,160,8,8);
  ctx.fillRect(112,160,8,8);
  
  // Row 22
  ctx.fillRect(16,168,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(24,168,8,8);
  ctx.fillRect(32,168,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(40,168,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(48,168,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,168,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(64,168,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,168,8,8);
  ctx.fillStyle = "rgb(252,114,96)";
  ctx.fillRect(80,168,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(88,168,8,8);
  ctx.fillRect(96,168,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(104,168,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(112,168,8,8);
  
  // Row 23
  ctx.fillRect(16,176,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(24,176,8,8);
  ctx.fillRect(32,176,8,8);
  ctx.fillRect(40,176,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(48,176,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(56,176,8,8);
  ctx.fillStyle = "rgb(214,194,221)";
  ctx.fillRect(64,176,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(72,176,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(80,176,8,8);
  ctx.fillStyle = "rgb(236,59,36)";
  ctx.fillRect(88,176,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(96,176,8,8);
  ctx.fillRect(104,176,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(112,176,8,8);
  
  // Row 24
  ctx.fillRect(24,184,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(32,184,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(40,184,8,8);
  ctx.fillRect(48,184,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(56,184,8,8);
  ctx.fillRect(64,184,8,8);
  ctx.fillRect(72,184,8,8);
  ctx.fillRect(80,184,8,8);
  ctx.fillStyle = "rgb(154,22,22)";
  ctx.fillRect(88,184,8,8);
  ctx.fillRect(96,184,8,8);
  ctx.fillRect(104,184,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(112,184,8,8);
  
  // Row 25
  ctx.fillRect(8,192,8,8);
  ctx.fillRect(16,192,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(24,192,8,8);
  ctx.fillRect(32,192,8,8);
  ctx.fillRect(40,192,8,8);
  ctx.fillRect(48,192,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(56,192,8,8);
  ctx.fillRect(64,192,8,8);
  ctx.fillRect(72,192,8,8);
  ctx.fillRect(80,192,8,8);
  ctx.fillStyle = "rgb(89,12,12)";
  ctx.fillRect(88,192,8,8);
  ctx.fillRect(96,192,8,8);
  ctx.fillRect(104,192,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(112,192,8,8);
  
  // Row 26
  ctx.fillRect(0,200,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(8,200,8,8);
  ctx.fillRect(16,200,8,8);
  ctx.fillRect(24,200,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(32,200,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(40,200,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(48,200,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(56,200,8,8);
  ctx.fillRect(80,200,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(88,200,8,8);
  ctx.fillRect(96,200,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(104,200,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(112,200,8,8);
  
  // Row 27
  ctx.fillRect(0,208,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(8,208,8,8);
  ctx.fillRect(16,208,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(24,208,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(32,208,8,8);
  ctx.fillRect(40,208,8,8);
  ctx.fillRect(48,208,8,8);
  ctx.fillRect(56,208,8,8);
  ctx.fillRect(80,208,8,8);
  ctx.fillStyle = "rgb(60,40,66)";
  ctx.fillRect(88,208,8,8);
  ctx.fillRect(96,208,8,8);
  ctx.fillRect(104,208,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(112,208,8,8);
  
  // Row 28
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(8,216,8,8);
  ctx.fillRect(16,216,8,8);
  ctx.fillRect(24,216,8,8);
  ctx.fillRect(80,216,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(88,216,8,8);
  ctx.fillRect(96,216,8,8);
  ctx.fillStyle = "rgb(153,102,170)";
  ctx.fillRect(104,216,8,8);
  ctx.fillRect(112,216,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,216,8,8);
  
  // Row 29
  ctx.fillRect(88,224,8,8);
  ctx.fillStyle = "rgb(185,151,197)";
  ctx.fillRect(96,224,8,8);
  ctx.fillRect(104,224,8,8);
  ctx.fillRect(112,224,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,224,8,8);
  
  // Row 30
  ctx.fillRect(96,232,8,8);
  ctx.fillStyle = "rgb(98,65,109)";
  ctx.fillRect(104,232,8,8);
  ctx.fillRect(112,232,8,8);
  ctx.fillStyle = "rgb(20,20,20)";
  ctx.fillRect(120,232,8,8);
  
  // Row 31
  ctx.fillRect(104,240,8,8);
  ctx.fillRect(112,240,8,8);
}
            
          
!
999px

Console