canvas keep the first text draw?

Question

I am writing a little app using canvas.

In app have a button "next" when i click next canvas draw another text.

I use clearRect to clear canvas before redraw text. But the first text draw never remove.

This is my code:

ctx = $("canvas").get("0").getContext('2d');
    ctx.canvas.width = 300;
    ctx.canvas.height = 100;
 var fontSize = 300/4;
    ctx.font= fontSize + "px Times New Roman";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fillText(VietBasic.mainWord[0],300/2,(100 - fontSize*1.4)/2);
$("#next").bind("click.next", function(){
       k++;
       if(k >= VietBasic.mainWord.length){
           k=0;
       }
       ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
       ctx.font= fontSize + "px Times New Roman";
       ctx.textAlign = 'center';
       ctx.textBaseline = 'top';
       ctx.fillStyle = "rgb(255, 0, 0)";
       ctx.fillText(VietBasic.mainWord[k],300/2,(100 - fontSize*1.4)/2);
       $("#imgSample").html(VietBasic.mainWord[k]);

       $("#wordSample").html(VietBasic.keyWord[k]);

       $("#mainImg").attr("src",VietBasic.imageSample[k]);
    });

This is screenshot:

enter image description here

Please help me, i am newbie... Thanks for reading! :)

Probably a bug in the Android environment. There have been problems with clearRect in the past. See if not this helps: http://stackoverflow.com/questions/12804710/android-4-html5-canvas-not-redrawing — , Jul 25 '13 at 06:04

score 0 · Answer 1 · answered Jul 25 '13 at 03:47

0

Looks like the issue is with your clearRect call. Your having it use your ctx.canvas.height value, but thats only set to 100, and your canvas is much bigger than that.

ctx.canvas.width = 300;
ctx.canvas.height = 100;
...
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

you going to want to use something like

var myCanvas= document.getElementById("myCanvasID");

ctx.clearRect(0,0,myCanvas.width,myCanvas.height);

or at least for the time being set

ctx.canvas.height = 1000;

answered Jul 25 '13 at 03:47

ericjbasti

2,085
17
19

Thanks for your answer.But i try your way! but still have same error. Have any idea?? – Lê Huy Jul 25 '13 at 04:04
Perhaps it will be easier to see whats going on if you change the ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); to a ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); and see where this coordinates are... give it a fill style that will stand out ctx.fillStyle = "rgba(0, 255, 0, .5)"; – ericjbasti Jul 25 '13 at 04:22
I already try it, it work to hide first text draw, but as you see in the image, i use background, so i dont want fill canvas because it's hide my background – Lê Huy Jul 25 '13 at 05:03
Yeah I get that, I just wanted to verify that the rect used for clearRect was where you expected it to be, and it sounds like fillRect confirms it is. At this point, you should try some of the other methods to clear the canvas... $("canvas").get("0").width=100; $("canvas").get("0").width=ctx.canvas.width; this will force it to reset the canvas ctx. – ericjbasti Jul 25 '13 at 13:25

canvas keep the first text draw?

1 Answers1