Adding user entered text to a Canvas



Enter Text and submit.
Clock Using Canvas DEMO : Arc of Clock Add Second Minutes Hour Border
Adding Number Synch Size StopWatch

HTML

<canvas id="my_canvas" width="500" height="200"  style="border:1px solid #000000;"></canvas>
<label for="text1">Enter text</label><br>
<input type="text" id="text1" name="text1"> <button type="button" id="b1">Add</button>

JavaScript

const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

document.getElementById('b1').addEventListener('click', () => {
  const text = document.getElementById('text1').value;
  ctx.font = '20px Verdana';
  ctx.textAlign = 'end';
  ctx.fillText(text, 180, 130);
});