Javascript Course

The clearCanvas() function presented in this page can be used to clear propely the drawing and text contexts from canvas.
// function to clear the canvas ( https://coursesweb.net/ )
// 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
}
- This function is useful when you want to remove all the canvas context to can add new drawings and texts on an empty canvas.

• Here is an example, when a "Set Nr" button is clicked, a random number between 1 and 100 is displayed in canvas. A "Clear" button will clear the canvas context, so to not display the numbers one over the other; that will happen if you click the "Set Nr" button again (see the comments in code).
<h4>Canvas</h4><canvas width="200" height="100" id="cnv1"></canvas><br/>
<button id="clear_cnv">Clear</button> - <button id="setnr_cnv">Set Nr</button>
<script type="text/javascript">
// <![CDATA[
// function to clear the canvas ( https://coursesweb.net/ )
// 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
}

// sets and adds a random number in canvas
// cnv = the object with the canvas element
function  addNrCnv(cnv) {
  // gets a random number between 1 and 100
  var nr =  Math.floor(Math.random() * 100 + 1);

  var ctx = cnv.getContext('2d');     // gets reference to canvas context

  // create text with the number in canvas (sets text color, font type and size)
  ctx.fillStyle = '#00f';
  ctx.font = 'italic 38px sans-serif';
  ctx.fillText(nr, 80, 64);
}

// get a reference to the <canvas> tag
var cnv1 = document.getElementById('cnv1');

// register onclick event for #clear_cnv button to call the clearCanvas()
document.getElementById('clear_cnv').onclick = function() { clearCanvas(cnv1); }

// register onclick event for #setnr_cnv button to call the addNrCnv()
document.getElementById('setnr_cnv').onclick = function() { addNrCnv(cnv1); }
// ]]>
</script>
- Demo (Click "Set Nr" to add a random number, click "Clear" to clear the canvas):

Canvas


-

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Clear Canvas Context

Last accessed pages

  1. Align DIVs on the same line (3569)
  2. Recursive function to create Multi-Level Menu in PHP (10375)
  3. The Stage, Panels and Tools in Flash (8611)
  4. Inheritance - Parent class and Child class (4397)
  5. Add, Change, and Remove Attributes with jQuery (43889)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (778)
  2. PHP Unzipper - Extract Zip, Rar Archives (760)
  3. SHA256 Encrypt hash in JavaScript (664)
  4. Read Excel file data in PHP - PhpExcelReader (575)
  5. SHA1 Encrypt data in JavaScript (479)