JSFiddle - React, Tailwind, and code Playground

by dieuhd

HTML

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="100" height="40" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<button type="button" onClick="refreshCaptchar ()">Refresh</button>

<script>
refreshCaptchar ();
function getRandomString () {
	var chars= "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  var string_lenght = 6;
  var ChangeCaptcha = '';
  for (var i=0; i<string_lenght; i++) {
    var rnum = Math.floor(Math.random() * chars.length);
    ChangeCaptcha+= chars.substring(rnum, rnum+1);
  }
  return ChangeCaptcha;
}
function refreshCaptchar () {
	var str= getRandomString ();
	var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var imgData = ctx.createImageData(100, 40);

  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
      imgData.data[i+0] = randomNumber(0,255);
      imgData.data[i+1] = randomNumber(0,255);
      imgData.data[i+2] = randomNumber(0,255);
      imgData.data[i+3] = randomNumber(0,255);
  }

  ctx.putImageData(imgData, 0, 0);

  ctx.font="20px Georgia";
  // Create gradient
  var gradient=ctx.createLinearGradient(0,0,c.width,0);
  gradient.addColorStop(randomNumber(0,1),"magenta");
  gradient.addColorStop(randomNumber(0,1),"blue");
  gradient.addColorStop(randomNumber(0,1),"red");
  // Fill with gradient
  ctx.fillStyle=gradient;
  ctx.fillText(str,15,25);

}
function randomNumber(min, max) {
  return Math.random() * (max - min) + min;
}
</script>

</body>
</html>