CODEWITHSUNDEEP
javascriptjquery-mobilecordovacanvas
user3262344
user3262344

Reputation: 125

canvas doubling in jquery mobile phonegap app

so i have set up an git as well as an app on the build.phonegap site

git->

https://github.com/prantikv/image-typer

link to download the app:->

https://build.phonegap.com/apps/1171702/download/android/?qr_key=sX_SB4ptD87r8yfvQey2

the app is simple it fills the canvas with a blue color and allows the user to type text on the canvas from an input box.

i am using jquery mobile..!!!

here is how i do it:

    #container{
    position: relative;
  }
#myCanvas{
    border: 2px solid red;
    position: absolute;
    width: 100%;
}

<div id="container">
        <canvas id="myCanvas"></canvas>
</div>

$(document).ready(function(){
 var context2= $("#myCanvas")[0].getContext('2d');
 $("#myCanvas,#container").height((3*window.innerWidth)/4);
    context2.fillStyle = "#0000ff"; 
    context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);

    $("#toptext").on("keyup",function(){
        //save blue style of fill rectangle
        context2.save();
        var topTxt=$(this).val();
        //clear the rectangle
        context2.clearRect (0,0,context2.canvas.width,context2.canvas.height);
        //draw the canvas again to get fresh frame
        context2.fillRect(0,0,context2.canvas.width,context2.canvas.height);
        //change fill style to white
        context2.fillStyle = "#ffffff"; 
        context2.fillText(topTxt,50,50,100,100);
        //
        context2.restore();

    });

});

so essentially the canvas is redrawn with every keystroke and the whole text is printed on the canvas.

it works fine in all the browsers i have check..

BUT when i convert it to a phonegap app via the cloud service i get a little problem and it is very frustrating.

the canvas works fine but as soon as i type there is another duplicate canvas in the background..and it is a bit offset

this is the canvas before typing anything: http://i60.tinypic.com/11v00g9.png

and this it the canvas after typing: http://i61.tinypic.com/35aj8k5.png

notice the other canvas peeping from behind..

It is not any other element it is the same canvas just another identity of it..the text shows up on both the canvases..

WHAT the problem is? HOW do i solve this?

Upvotes: 0

Views: 521

Answers (1)

Dick van den Brink
Dick van den Brink

Reputation: 14557

Had the same issue on Android, An overflow: hidden on the container element fixed my issue. Not really sure why that was helping though. 

#container {
    /* This fixes the double draw on Android 4.1.x and 4.2.x */
    overflow: hidden;
}

Upvotes: 2

Related Questions