JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div>
    <canvas id="c6" width="600" height = "28" 
    style="background: url('http://onderwijsinstelling.vandijk.nl/webshop/images/b2b/buttonFontFaceArrow.png') repeat scroll 0 0 transparent;"></canvas>
 <div>
         <button onclick="showFillText();return true;">Fill Text</button>
         <button onclick="Clear_text();return true;">Erase Everything</button>

     <input value="test" type="text" id="test"/>         
     </div>
 </div>

 <script>
     var test = $('#test').val()
     var c6 = document.getElementById("c6");
             var c6_context = c6.getContext("2d");

     function showFillText() {
         c6_context.fillStyle = '#fff';
         c6_context.font = '15.6px sans-serif';
         c6_context.textBaseline = 'bottom';
         c6_context.fillText(test, 35, 23);
     }


     function Clear_text() {
         c6_context.clearRect(1, 1, 600, 300);
     }                  
 </script>

CSS

body{padding:10px;}