clearRect text canvas html5 - html

Question

I have a canvas text added in
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
Javascript code:
theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var text = 'word';
context.font = '16pt Calibri';
context.fillStyle = '#333';
var p0 = {x:x0,y:y0};
var word = {x:p0.x, y:p0.y, velocityx: 0, velocityy:0};
var lastTime = new Date().getTime();
wrapText(context, text, p0.x, p0.y, maxWidth, lineHeight);
wrapText function():
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
How can I use clearRect() for deleting only the word box?
context.clearRect(word.x, word.y, word.x + offsetX, word.y + offsetY);
UPDATE
Partially solved with #Ozren Tkalčec Krznarić tips. But it don't erase the word completely, some part of the precedent is not erased (see the image above).
You can see the problem here: michelepierri.it/examples/canvas.html
jsfiddle: http://jsfiddle.net/michelejs/yHnYh/6/
Thank you so much.

Answer 1

After wrapText() call, use this:
context.clearRect(
p0.x,
p0.y,
metrics.width > maxWidth ? metrics.width : maxWidth,
- text.split(' ').length * lineHeight);
See this fiddle.
Note that:
p0.x is your x coord (left boundary),
p0.y is your y coord (bottom boundary),
metrics.width > maxWidth ? metrics.width : maxWidth is your width, calculated as in the function itself,
- text.split(' ').length * lineHeight is you negative height since text is accordingly aligned; it's calculated as in the function itself