Live editing text on a canvas

In this example below you will see how to do a Live editing text on a canvas with some HTML / CSS and Javascript

playing with a custom contenteditable canvas for text effectsChrome only experiment

Thumbnail
This awesome code was written by pixelass, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pixelass ©
  • HTML
  • CSS
  • JavaScript
    doctype
h1 Google Chrome only
h2 Edit the text
canvas#c
input#i( value="CODEPEN" 
         type="text" 
         autocomplete="off" 
         autocorrect="off" 
         autocapitalize="off" 
         spellcheck="false"
         autofocus
         maxlength="18")

/*Downloaded from https://www.codeseek.co/pixelass/live-editing-text-on-a-canvas-PqMrgy */
    #c, #i {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 600px;
  transform: translate(-50%,-50%);
}

#i {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  font: 50px sans-serif;
  background: none;
  color: white;
  border: 0;
  -webkit-text-fill-color: transparent;
}

h1 {
    font: 20px sans-serif;
  text-align: center;
}

h2 {
    font: 16px sans-serif;
  text-align: center;
}



/*Downloaded from https://www.codeseek.co/pixelass/live-editing-text-on-a-canvas-PqMrgy */
    var C = document.getElementById('c');
var I = document.getElementById('i');

var $ = C.getContext('2d');

C.height = 100;
C.width = 600;
var counter = 0;
var shift = 20;
var minShift = -10;
$.fillStyle = 'rgba(0,0,0,1)';
$.fillRect(0, 0, C.width, C.height);

var draw = () => {
  counter += 0.01;
 let text = I.value;
 $.fillStyle = 'rgba(0,0,0,0.05)';
  $.globalCompositeOperation = 'darken';
  $.fillRect(0, 0, C.width, C.height);
  $.globalCompositeOperation = 'lighten';
  for (let i = 0; i < 20; i++) {
    $.strokeStyle = `hsla(${360 / 20 * i},100%,50%,0.05)`;
    $.strokeText(text, C.width / 2 + Math.cos(360 / 20 * counter*i / 180 * Math.PI) * (Math.abs(Math.sin(counter)*shift) + minShift), C.height / 2 + 17 + Math.sin(360 / 20 * counter*i / 180 * Math.PI) * (Math.abs(Math.sin(counter)*shift) + minShift));
  }
  
  requestAnimationFrame(draw);
  
}
$.font = '50px sans-serif';
$.textAlign = 'center'


draw();

Comments