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:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Add Text in Canvas from Input text field, as it is Typed

Last accessed pages

  1. Sending data with GET and POST in the same request (3603)
  2. Node.js Move and Copy file (3518)
  3. Get the value of the selected /checked checkboxes in a form (37630)
  4. Read Excel file data in PHP - PhpExcelReader (56711)
  5. Get and Modify content of an Iframe (12777)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (448)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)