キャンバスの縦書きが縦方向に伸びています

Question

私はキャンバスを使ってテキストを描画していますが、一部のモバイルデバイスでは断続的に縦に伸びているので、テキストの下端が元の位置になります。ディスプレイの上部。私はiPhone 6+で自分自身を再現することはできませんが、iPhone 6以降や他のiPhoneやAndroidでも発生することが報告されています。

これは私が使用したコード、見てかなり標準です：

ctx.globalalpha = 1.0; 
    ctx.fillStyle = "white"; 
    ctx.font = "40.0rem CenturyGothic"; 
    ctx.textAlign = "center"; 
    ctx.fillText("TOUCH TO START", width/2, (height/2) + 8, width); 

それは伸びますキャンバス全体ではありませんので、私は、テキストの後ろに描くイメージは、引き伸ばされていない、上の描画テキストのみキャンバス。

私はJavaScriptでこのコードをキャンバスの幅と高さを設定します。

canvas.width = window.innerWidth; 
    canvas.height = (1600/1000) * canvas.width; 

そして、私はここにCSSで幅と高さを設定します。

#canvas { 
     width: 100%; 
     height: auto; 
    } 

は、誰がこれを経験していますか？どのようにそれに対処する上の任意のアイデア？

Answer 1

ピクセルが伸びているので、私はこの方法が特に嫌いですが、いくつかの基本的なことにはうまくいきます。

私はオフスクリーンキャンバスにテキストを書き込んでいます。その画像を元のキャンバスに戻しています。それが戻ってきたら私はイメージを伸ばしています。ストレッチは元の幅と高さに追加されました。幅と高さが相対的なままでいるため、私はこれを行いました。あなたの言葉は毎回違うかもしれません。幅と高さの変数が割り当てられ、どのようにキャンバスの幅と高さが割り当てられているどのように

https://jsfiddle.net/0xbtm4o1/

CanvasRenderingContext2D.prototype.stretchText = function(text, x, y, xw, xh) { 
    var c = document.createElement("canvas").getContext("2d"); 
    c.font = this.font; 
    c.fillColor = this.fontColor; 
    var w = c.measureText(text).width; 
    var h = parseInt(this.font); 
    c.fillText(text, 0, h); 
    this.drawImage(c.canvas, 0, 0, w, h, x, y, w+xw, h+xh); 
} 


var ctx = document.getElementById("c").getContext("2d"); 

ctx.font = "20px Arial"; 
ctx.fillColor = "black"; 
ctx.stretchText("Hello World!", 10, 20, 0, 40);