angelali
11-23-2012, 06:58 AM
Seriously, HTML 5 Canvas really lacks functionality. I searched how to clear a text written on it, and all what I am getting is to clear the whole damn canvas. Moreover, clearing all itself is not working. Here are my codes:
HTML
<img src="jjj.jpg" width="252" height="144" id="image">
<canvas id="canvas" width="252" height="144"></canvas>
<input type="button" onClick=" insertImg ();">
<input type="text" id="text"/>
<input type="button" onClick="writeText();">
<input type="button" value="Clear" onClick="clearCanvas();">
JavaScript
//Draw image
function insertImg () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("image");
context.drawImage(image, 0, 0);
}
//Write text
function writeText () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var style = 'italic';
var size = '50pt';
var family = '"Arial Black", Gadget, sans-serif'
var text = document.getElementById("text").value;
context.font = style + " " + size + " " + family;
context.fillStyle = 'blue';
context.fillText(text, 50, 50);
}
//Clear canvas
function clearCanvas () {
context.clearRect(0, 0, 252, 144);
}
Everything is working correctly, except, the canvas is not clearing when I click on the clear button. I will be glad if we can clear the text also separately from clearing canvas as a whole.
HTML
<img src="jjj.jpg" width="252" height="144" id="image">
<canvas id="canvas" width="252" height="144"></canvas>
<input type="button" onClick=" insertImg ();">
<input type="text" id="text"/>
<input type="button" onClick="writeText();">
<input type="button" value="Clear" onClick="clearCanvas();">
JavaScript
//Draw image
function insertImg () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = document.getElementById("image");
context.drawImage(image, 0, 0);
}
//Write text
function writeText () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var style = 'italic';
var size = '50pt';
var family = '"Arial Black", Gadget, sans-serif'
var text = document.getElementById("text").value;
context.font = style + " " + size + " " + family;
context.fillStyle = 'blue';
context.fillText(text, 50, 50);
}
//Clear canvas
function clearCanvas () {
context.clearRect(0, 0, 252, 144);
}
Everything is working correctly, except, the canvas is not clearing when I click on the clear button. I will be glad if we can clear the text also separately from clearing canvas as a whole.