Canvas special effect of drawing circle according to text

by hugogo7646

HTML

<div>Please insert text here to see partical special effect.</div>
<div><input type="text" /></div>
<div><canvas width="500" hiehgt="500"></canvas></div>

CSS

canvas {
  border: 1px solid blue;
}

JavaScript

//Text to draw
var sampleText = "👚👕 H";
drawParticleText(sampleText);

document.querySelectorAll("input")[0].addEventListener("input", function(event) {
	drawParticleText( this.value ? this.value : sampleText);
});

function drawParticleText(text) {
  var x = 200;
  var y = 100;
  var canvas = document.querySelectorAll("canvas")[0];
  var context = canvas.getContext("2d");
  
  //clear canvas first
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  //Draw text first
  context.textAlign = "center";
  context.font = "100px arial";
  context.fillText(text, 200, 100);
  //Get canvas data (RGB and alpha),
  //Data in imageData : [(r, g, b, a) of 1st place, (r, g, b, a) of 2nd place......]
  //from left to right, from top to bottom
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
  //Clear drawing
  context.clearRect(0, 0, canvas.width, canvas.height);

  //Sampling rate
  var sampleRate = 5;
  for (var j = 0; j < canvas.height; j += sampleRate) {
    for (var i = 0; i < canvas.width; i += sampleRate) {
      //Get RGBA data
      var red = imageData[(i + j * canvas.width) * 4];
      var green = imageData[(i + j * canvas.width) * 4 + 1];
      var blue = imageData[(i + j * canvas.width) * 4 + 2];
      var alpha = imageData[(i + j * canvas.width) * 4 + 3];
      if (alpha > 0) { //If alpha > 0, draw circle
        context.beginPath();
        //context.strokeStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
        context.fillStyle = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
        context.arc(i, j, 2, 0, 2 * Math.PI);
        context.fill();
      }
    }
  }
}