How To Clear Text On Html 5 Canvas

[bunnyali2013]

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.