jquery mobile phonegap fillText max ширина свойство не работает

Question

Я работаю над приложением, которое накладывает текст на изображение. Так что я не хочу, чтобы текст вышел из изображения. вот мой код:

стиль

#container{ 
overflow: hidden; 
z-index: 0; 
} 
#myCanvas{ 
    z-index: 1000; 
    border: 2px solid red; 

    width: 100%; 
} 

HTML код

<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"; 
     var maxWidth=50; 
     context2.font="bold 25px verdana"; 
     context2.fillText(topTxt,50,50,100,100,**maxWidth**); 
     // 
     context2.restore(); 

    }); 

});

извещение максимальная ширина установлен. так что текст не должен выходить из ширины при условии

Он отлично работает в браузере, но как только у преобразовать его в приложение PhoneGap ширина больше не применяется, и текст выходит из картинки:

увидеть приложение здесь:

https://build.phonegap.com/apps/1171739/download/android/?qr_key=JrAyvaQENkAkowwmdDjC

вот мой мерзавец:

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

я проверил его после удаления JQuery мобильного и у меня такая же проблема ... так что проблема либо с Android или PhoneGap ...

Как обойти это

Answer 1

Я думаю, что вы используете fillText неправильно, так как она определяется следующим образом:

void fillText(
    in DOMString textToDraw, 
    in float x, 
    in float y, 
    [optional] in float maxWidth 
); 

и вы вызываете его: context2.fillText(topTxt,50/*x*/,50/*y*/,100/*max-width*/,100,**maxWidth**); так последние два фактически не используются. См. Определение здесь: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text#fillText()