The JavaScript code presented in this page can be used to add text in canvas, from an input text field, as it is typed. The text is added on multiple lines in canvas, if exceds canvas width (see the comments in code).
<h4>Canvas</h4><canvas width="350" height="180" id="cnv1"></canvas><br/>
Text: <input type="text" id="text_cnv" size="40" maxlength="250" />
<script type="text/javascript">
// <![CDATA[
// Script to add Text in Canvas from input text field, as it is typed
// From:

// function to clear the canvas
// cnv = the object with the canvas element
function clearCanvas(cnv) {
  var ctx = cnv.getContext('2d');     // gets reference to canvas context
  ctx.beginPath();    // clear existing drawing paths;         // store the current transformation matrix

  // Use the identity matrix while clearing the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, cnv.width, cnv.height);

  ctx.restore();        // restore the transform

// adds the text in canvas, oon multiple lines
// ctx = reference to canvas context
// text = the text to add
// x = horizontal position where to start adding the text
// y = vertical position where to start adding the text
// maxWidth = the maximum width of the text line
//  lineHeight = the height of the line
function  addTextCnv(ctx, text, x, y, maxWidth, lineHeight) {
  // splits the text in words to can wrap it on new lie if exceds maxWidth
  var words = text.split(' ');
  var nr_w = words.length
  var addtxt = '';

  // sets to add the text and rows
  for(var n = 0; n < nr_w; n  ) {
    var txtLine = addtxt   words[n]   ' ';
    var metrics = ctx.measureText(txtLine);
    var txtWidth = metrics.width;
    if (txtWidth > maxWidth && n > 0) {
      ctx.fillText(addtxt, x, y);
      addtxt = words[n]   ' ';
      y  = lineHeight;
    else addtxt = txtLine;

  // adds the text in canvas (sets text color, font type and size)
  ctx.fillStyle = '#0001be';
  ctx.font = 'bold 17px sans-serif';
  ctx.fillText(addtxt, x, y);

// get a reference to the canvas element, and its context
var cnv1 = document.getElementById('cnv1');
var ctx1 = cnv1.getContext('2d');

// sets maximum line width, line height, and x /y coords for text
var maxWidth = cnv1.width - 10;
var lineHeight = 23;
var x_pos = (cnv1.width - maxWidth) / 2;
var y_pos = 15;

// register onkeyup event for #text_cnv text field to add the text in canvas as it is typed
document.getElementById('text_cnv').onkeyup = function() {
  clearCanvas(cnv1);      // clears the canvas
  addTextCnv(ctx1, this.value, x_pos, y_pos, maxWidth, lineHeight);
// ]]>
- Demo (type some text in the text box):



Daily Test with Code Example

Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em></em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
Indicate the PHP variable that contains data from a form sent with method="post".
if(isset($_POST["field"])) {
  echo $_POST["field"];
Add Text in Canvas from Input text field, as it is Typed

Last accessed pages

  1. JavaScript code and PHP (22407)
  2. Read Excel file data in PHP - PhpExcelReader (63527)
  3. Contact page - CoursesWeb (2152)
  4. Tabs effect with CSS (2864)
  5. Integer and Float value in Select with PDO from string to numeric (5293)

Popular pages this month

  1. Contact page - CoursesWeb (1638)
  2. Tabs effect with CSS (1624)
  3. Insert, Select and Update NULL value in MySQL (822)
  4. Read Excel file data in PHP - PhpExcelReader (653)
  5. PHP getElementById and getElementsByTagName (414)