clearRect text canvas html5 -

i have canvas text added in

    <canvas id="canvasone" width="500" height="500">        browser 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 use clearrect() deleting word box?

      context.clearrect(word.x, word.y, word.x + offsetx, word.y + offsety); 

update

partially solved @ozren tkalčec krznarić tips. don't erase word completely, part of precedent not erased (see image above).

you can see problem here: michelepierri.it/examples/canvas.html

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

thank much.

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 x coord (left boundary),
• p0.y y coord (bottom boundary),
• metrics.width > maxwidth ? metrics.width : maxwidth width, calculated in function itself,
• - text.split(' ').length * lineheight negative height since text accordingly aligned; it's calculated in function itself