Display a text on canvas for only X seconds
Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
-
MarPlo
- Posts: 142
Display a text on canvas for only X seconds
I have written a code that adds a text in canvas on clicking a button.
And i want to display this text for lets say 2 seconds. How can I make the text in canvas disappear after 2 seconds?
This is the code.
Code: Select all
<canvas id="canvas" height="250" width="350"></canvas>
<button id="show_txt">Show text</button>
<script>
var cav = document.getElementById('canvas'); // get canvas element
var ctx = cav.getContext("2d");
// write text with gradient in canvas
function write() {
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0,0,cav.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!",10,90);
}
// register click event on the #show_txt button to call write()
document.getElementById('show_txt').addEventListener('click', function(){ write();});
</script>
Admin
You have to use setTimeout() to call a function, after a given time, that clears the canvas content.
Here's a simple demo for writing and clearing text in canvas in 2 seconds (using your code):
Code: Select all
<canvas id="canvas" height="250" width="350"></canvas>
<button id="show_txt">Show text</button>
<script>
var cav = document.getElementById('canvas'); // get canvas element
var ctx = cav.getContext("2d");
// write text with gradient in canvas
function write() {
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0,0,cav.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!",10,90);
}
// clear canvas
function clear(){
ctx.clearRect(0,0,cav.width,cav.height);
}
// call write() function, and clear() after the received t milliseconds
function start(t) {
write();
setTimeout(function(){ clear();}, t);
}
// register click event on the #show_txt button to call start()
document.getElementById('show_txt').addEventListener('click', function(){ start(2000);});
</script>
Similar Topics
-
Display selected option into a Div
JavaScript - jQuery - Ajax
First post
How can I make that when an option from dropdowna <select> list is selected, the value of that option be displayed into a Div.
I have this...
Last post
You have to start with a <select> element which raises a 'change' event when an option is selected.
Inside that event, 'this.value' refers to...
-
Display data from mysql that has specified string
PHP - MySQL
First post
I have a simple script to show the visited url
but from my sql table I would like to display only the 'tag=variables', not id= or other...
Last post
Thank you so mutch `thanks thanks thanks` working in once
-
How to display in php special characters from mysql
PHP - MySQL
First post
I prefer not to bother you too often but because of my bad English, two accounts have already been blocked on stack overflow.
And I think you are...
Last post
Try this:
- At the beginning of your php script, for example at the beginning of the configuration.php file add the header function for utf-8...
-
Spatial Reality Display: Responsive, no-glasses 3D
Entertainment and Games
Sony has debuted a new kind of 3D monitor with its Spatial Reality Display, which tracks your eyes and shows a different dynamically-generated image...
-
How to get text from javascript alert box
JavaScript - jQuery - Ajax
First post
Good evening (dutch-time) I have a javascript what can copy text to a clip-board + it has a button to show the item-list in a alert-box.
But can`t...
Last post
Thanks for the support I tried already things with history + f_print
also studied those a little before I asked coursesweb but I shall
when my head...