Stretch text area as you type

by ShaCP

HTML

<textarea id="ta"></textarea>

CSS

textarea {
  min-width: 200px;
  font: 16px Arial;
  max-width: 100%;
}

JavaScript

const ta = document.querySelector('#ta');
const containerWidth = parseInt(getComputedStyle(ta.parentElement).width, 10);

ta.addEventListener('input', (e) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
let text = ctx.measureText(e.target.value);
e.target.style.width = `${text.width}px`
console.log(text.width);
})