JSFiddle - React, Tailwind, and code Playground

by djwelsh

HTML

<canvas id="c" width="400" height="300"></canvas>
<canvas id="main" width="400" height="300"></canvas>
<input id="ballsize" type="range" min="50" max="100" value="50" class="setter" />
<input id="slider" type="range" min="1" max="100" value="10" class="setter" />
<select id="capsize">
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="4">Large</option>
</select>
<img id="i" src="">
<img id="i" src="...

CSS

#main {
  outline: 1px dashed #cccccc;
}
img, #c {
  display: none;
}
.setter {
  display: none !important;
}

JavaScript

var canvas, mainCanvas;
var ctx, mainCtx;
var img;

window.onload = function () {
  canvas = document.getElementById('c');
  ctx = canvas.getContext('2d');
  mainCanvas = document.getElementById('main');
  mainCtx = mainCanvas.getContext('2d');
  img = document.getElementById('i');
  
  pixelate();
  document.getElementById('capsize').onchange = pixelate;
//  document.getElementById('ballsize').onchange = pixelate;
//  document.getElementById('slider').onchange = pixelate;
}


function pixelate () {
	mainCtx.clearRect(0, 0, canvas.width, canvas.height);
  
  var capsize = document.getElementById('capsize').value;
	//var ballsize = document.getElementById('ballsize').value / 10;
	//var size = document.getElementById('slider').value / 100,
	var ballsize = 5 * capsize; 
  var size = 0.1 / capsize,
	    w = canvas.width * size,
	    h = canvas.height * size;
	
	//Draw tiny image
	ctx.drawImage(img, 0, 0, w, h);
	ctx.imageSmoothingEnabled = false;
	
  //Get ball data
  var data = ctx.getImageData(0, 0, w, h);
  
  
  var xratio = canvas.width / w;
  var yratio = canvas.height / h;
  var cx = 0;
  var cy = -1;
  var cxOffset = xratio / 2;
  //For each pixel, draw a rectangle spaced so it looks large
  for (var i = 0; i < data.data.length; i++) {
//  	console.log (cx + ", " + cy);
  	
    if ((i % 4) !== 0) continue;
    if ((cx % w) === 0)  {
    	cx = 0;
      cy++;
    }
    
    mainCtx.fillStyle = "rgba(" + data.data[i] + "," + data.data[i+1] + "," + data.data[i+2] + "," + data.data[i+3] + ")";
  	
    mainCtx.beginPath();
    mainCtx.moveTo(cx * xratio + ((cy % 2 === 0) ? cxOffset : 0), cy * yratio);
    mainCtx.arc(cx * xratio + ((cy % 2 === 0) ? cxOffset : 0), cy * yratio, ballsize, 0, Math.PI * 2);
    mainCtx.closePath();
    mainCtx.fill();
    //ctx.fillRect(cx * xratio, cy * yratio, 12, 12)
    
    cx++;
    
    
  	
  }

  
  
  
  //Redraw small image at original size using lossy data
//	ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width,...