<< ENTER ANY TEXT HERE 






 <script>
// DEFINE YOUR GLOBAL VARIABLES HERE
 var canvas;
  var context;
  var msg;
 var nf;
  nf = 10; 
  
  var inc;
  
  inc = 0;
  
  // INITIALIZE THE STARTING FUNCTION
function init() {
  
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  
  msg = document.getElementById("inp");
  
  // YOU CAN ALSO ADD THE KEYUP FUNCTION IN THE HTML TAG
  msg.addEventListener("keyup", create(), false);
  
  // CALL SUBSEQUENT FUNCTIONS, as many as you need
  
  drawBkgd(); // COVER TRANSPARENT CANVAS
  
  return setInterval(create, 50); // THIS IS WHERE AL HAPPENS
  
  }
  
  
  function drawBkgd() { // USE THIS AREA TO MODIFY BKGD
  context.fillStyle = "rgb(255,100,100)";
  context.fillRect(0,0,canvas.width, canvas.height);
  }
function clear() {
  context.clearRect(0,0,canvas.width, canvas.height);
  }
function clearMsg() {
  msg.value = "";
  }
function create() { 
  // >>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
 var newMsg = msg.value.toUpperCase();
  
  inc += 0.1;
  
  if (inc > Math.PI *2) { inc = 0; }
  
  var nf = Math.abs(Math.cos(inc) * 100) + 10;
  
  var R = Math.round( 255 - nf );
  
  document.getElementById("display").innerHTML = "nf = " + nf + " | R = " + R;
 var mf = "normal "+nf+"px 'Arial black'";
  
  clear();
  drawBkgd();
  
  context.fillStyle = "rgb("+R+","+R+","+R+")";
  context.font = mf;
  context.textAlign = 'center';
  context.fillText(newMsg, canvas.width/2, canvas.height-nf);
// >>>>>>>>>>>>>>>>>>>>>>>>>> END HERE
  }
  
  </script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="400" height="200"></canvas>
<br><br>
<input type="text" maxlength="5" size="5" id="inp" value="HOLA" onfocus="clearMsg()">