Javascript Course

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 can be used to create input text field in web page?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Which CSS property displays the text in a small-caps font?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
What instruction displays a notice box with a message inside it, in JavaScript?
for() Date() alert()
var msg = "Visit CoursesWeb.net";
alert(msg);
Indicate the PHP code used to get the users IP.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Add Text in Canvas from Input text field, as it is Typed

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (130491)
  2. Follow the mouse cursor with a DIV inside a Parent (7810)
  3. PHP Unzipper - Extract Zip, Rar Archives (26845)
  4. jQuery Drag and Drop Rows between two similar Tables (12015)
  5. querySelector and querySelectorAll (28675)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (804)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (564)
  3. SHA1 Encrypt data in JavaScript (430)
  4. Create simple Website with PHP (397)
  5. Read Excel file data in PHP - PhpExcelReader (389)