キャンバス要素がiOSデバイスでレンダリングされない

Question

私は、デスクトップブラウザとAndroidデバイスで完全にレンダリングされるが、iOSデバイス（iPad、iPhone）ではレンダリングされないキャンバス要素を自分のサイトに持っていますイオス。私は私のCSSフレームワークとしてMaterializeを使用しています。

コードに追加する必要があるものはありますか？

Here is live version

var next; //initialize for interval 
 
\t //paint random colored pattern on profile screen 
 
\t function paintCanvas() { 
 

 
\t \t const c = document.querySelector("#canvas"); 
 
\t \t const ctx = c.getContext("2d"); 
 
\t \t c.width = window.outerWidth; 
 

 
\t \t const width = c.width; 
 
\t \t const height = 612; //canvas height 
 

 
\t \t const min = 0; 
 
\t \t const max = width; 
 
\t \t const yMid = height/2; 
 
\t \t var y1 = yMid; 
 
\t \t var y2 = yMid; 
 

 
\t \t function getRandomColor(){ 
 

 
\t \t \t let r = Math.floor(Math.random()*256); 
 
\t \t \t let g = Math.floor(Math.random()*256); 
 
\t \t \t let b = Math.floor(Math.random()*256); 
 
\t \t \t let color = `rgba(${r}, ${g}, ${b}, 0.5)`; 
 
\t \t \t return color; 
 
\t \t } 
 

 
\t \t var x = 0; 
 

 
\t \t function paint() { 
 

 
\t \t \t if (x==(max/2)-2) { 
 
\t \t \t \t clearInterval(next); 
 
\t \t \t } 
 
\t \t \t ctx.lineWidth = 4; //sets width of line 
 
\t  \t ctx.strokeStyle = getRandomColor(); //assigns random color 
 
\t  \t ctx.beginPath(); //start line 
 
\t  \t ctx.moveTo(x,y1); //moves the origin 
 
\t  \t ctx.lineTo(max-x,y2); //go to the bottom right corner 
 
\t \t \t ctx.moveTo(x, y2); 
 
\t \t \t ctx.lineTo(max-x, y1); 
 
\t  \t ctx.stroke(); 
 
\t  \t 
 
\t  \t if(y1==0) { 
 
\t  \t \t x++; 
 
\t  \t } else { 
 
\t \t  \t y1--; 
 
\t \t  \t y2++; 
 
\t \t  } 
 

 
\t  } 
 

 
\t \t next = setInterval(paint, 0.05); 
 
\t } 
 

 
\t paintCanvas();

main { 
 
position: relative; 
 
} 
 

 
#canvas { 
 
\t position: absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t width: 100%; 
 
\t z-index: 0; 
 
}

<main id="#top" role="main"> 
 

 
    <canvas id="canvas" width="100%" height = "612px"></canvas> 
 
    
 
</main>

Answer 1

私は私のIpadの（設定>>サファリ>>アドバンス）上のWebインスペクタを有効にして、MacのPCの友人に接続することによって、この問題を解決しました。 MacでSafariを使用してWeb Inspectorを有効にして、Appleの開発者ツール（設定>>詳細>>メニューバーで開発メニューを表示）を表示することができました。

私の<canvas>要素の幅がゼロに戻っていることがわかりました。これは、window.innerWidthが0またはnullを返していたため、デバイスの幅ではなく幅がゼロになるようにキャンバスのサイズを変更していたことを意味していました。

これは、代わりにscreen.widthを試してみました。これは問題を解決しました。他のすべてのデバイスでwindow.innerWidthが動作することを知っているので、iOSデバイスでのみscreen.widthを使用するにはnavigator.platformのチェックを追加しました。

var next; //initialize for interval 
 
\t //paint random colored pattern on profile screen 
 
\t function paintCanvas() { 
 

 
\t \t const c = document.querySelector("#canvas"); 
 
\t \t const ctx = c.getContext("2d"); 
 
\t \t 
 
     //____________________________________________ 
 
     // ----------- FIX FOR THIS PROBLEM ---------- 
 
     //____________________________________________ 
 

 
     if (navigator.platform != "iPad" && navigator.platform != "iPhone" && navigator.platform != "iPod") { 
 
\t \t  c.width = window.outerWidth; 
 
      //I'll use window.innerWidth in production 
 
\t  } else { 
 
\t \t  c.width = screen.width; 
 
\t  } 
 

 
\t \t const width = c.width; 
 
\t \t const height = 612; //canvas height 
 

 
\t \t const min = 0; 
 
\t \t const max = width; 
 
\t \t const yMid = height/2; 
 
\t \t var y1 = yMid; 
 
\t \t var y2 = yMid; 
 

 
\t \t function getRandomColor(){ 
 

 
\t \t \t let r = Math.floor(Math.random()*256); 
 
\t \t \t let g = Math.floor(Math.random()*256); 
 
\t \t \t let b = Math.floor(Math.random()*256); 
 
\t \t \t let color = `rgba(${r}, ${g}, ${b}, 0.5)`; 
 
\t \t \t return color; 
 
\t \t } 
 

 
\t \t var x = 0; 
 

 
\t \t function paint() { 
 

 
\t \t \t if (x==(max/2)-2) { 
 
\t \t \t \t clearInterval(next); 
 
\t \t \t } 
 
\t \t \t ctx.lineWidth = 4; //sets width of line 
 
\t  \t ctx.strokeStyle = getRandomColor(); //assigns random color 
 
\t  \t ctx.beginPath(); //start line 
 
\t  \t ctx.moveTo(x,y1); //moves the origin 
 
\t  \t ctx.lineTo(max-x,y2); //go to the bottom right corner 
 
\t \t \t ctx.moveTo(x, y2); 
 
\t \t \t ctx.lineTo(max-x, y1); 
 
\t  \t ctx.stroke(); 
 
\t  \t 
 
\t  \t if(y1==0) { 
 
\t  \t \t x++; 
 
\t  \t } else { 
 
\t \t  \t y1--; 
 
\t \t  \t y2++; 
 
\t \t  } 
 

 
\t  } 
 

 
\t \t next = setInterval(paint, 0.05); 
 
\t } 
 

 
\t paintCanvas();

main { 
 
position: relative; 
 
} 
 

 
#canvas { 
 
\t position: absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t width: 100%; 
 
\t z-index: 0; 
 
}

<main id="#top" role="main"> 
 

 
    <canvas id="canvas" width="100%" height = "612px"></canvas> 
 
    
 
</main>