Add Text in Canvas from Input text field, as it is Typed

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: https://coursesweb.net/

// 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
  ctx.save();         // 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);
}
// ]]>
</script>

- Demo (type some text in the text box):

Canvas

Text:

<<-Keep the first Nr .. -- Clear Canvas Context->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Last accessed pages

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(141748)
Add, Change, and Remove Attributes with jQuery ^(46356)
Node.js Move and Copy file ^(28419)
Rectangle, Oval, Polygon - Star ⁽³³²²⁾
PHP PDO - prepare and execute ⁽⁹¹⁸⁷⁾

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁴⁷²⁾
CSS cursor property - Custom Cursors ⁽⁷⁸⁾
The Mastery of Love ⁽⁶⁹⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽⁶²⁾
CSS3 2D transforms ⁽⁴⁶⁾