clearRect текст холст html5

Question

У меня есть текст холст добавлен в

код

<canvas id="canvasOne" width="500" height="500"> 
     Your browser does not support HTML5 Canvas. 
    </canvas> 

Javascript:

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 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); 
    } 

Как я могу использовать clearRect() для удаления только словарного блока?

 context.clearRect(word.x, word.y, word.x + offsetX, word.y + offsetY); 

UPDATE

Частично решена с советами @Ozren Tkalčec Krznarić. Но он не полностью стирает слово, некоторая часть прецедента не стирается (см. Изображение выше).

Вы можете увидеть проблему здесь: michelepierri.it/examples/canvas.html

jsfiddle: http://jsfiddle.net/michelejs/yHnYh/6/

Спасибо так много.

Answer 1

После wrapText() вызова, используйте:

context.clearRect(
    p0.x, 
    p0.y, 
    metrics.width > maxWidth ? metrics.width : maxWidth, 
    - text.split(' ').length * lineHeight); 

См this fiddle.

Обратите внимание, что:

• p0.x ваш й коорд (левая граница),
• p0.y ваш у коорда (нижняя граница),
• metrics.width > maxWidth ? metrics.width : maxWidth ваша ширина, рассчитывается как в самой функции ,
• - text.split(' ').length * lineHeight Вы отрицательная высота, так как текст соответственно выровнен; он рассчитывается как в самой функции