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
Click on the HTML tag which creates an horizontal line in web page.
<br /> <em> <hr />
Some content ...
<hr />
Content under line ...
Which CSS property defines the text color?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Click on the function which searches if a character, or text exists in a string.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// isn`t in string");
else alert("http:// is in string");
Which function splits a string into an array of strings based on a separator?
array_merge() explode() implode()
$str = "apple,banana,melon,pear";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"apple", 1=>"banana", 2=>"melon", 3=>"pear")
Add Text in Canvas from Input text field, as it is Typed

Last accessed pages

  1. Input text fields (2285)
  2. Insert, Select and Update NULL value in MySQL (30219)
  3. Register and show online users and visitors (25571)
  4. JavaScript Slideshow Content (855)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (55241)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (515)
  2. Read Excel file data in PHP - PhpExcelReader (430)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (319)
  4. PHP getElementById and getElementsByTagName (255)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (234)