//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(); } } } }
<div>Please insert text here to see partical special effect.</div> <div><input type="text" /></div> <div><canvas width="500" hiehgt="500"></canvas></div>
canvas { border: 1px solid blue; }