HTML5キャンバスの背景の塗りつぶし、線および不透明度を設定する

Question

以下のコードを使用して、スタイルをに設定しましたが、fillStyleを設定できません。ただし、strokeStyleとlineWidthは正常に動作しています。誰もがこれを手伝ってもらえますか？

Init() 
{ 
    var can = byId('myCanvas'); 

     // get it's context 
     hdc = can.getContext('2d'); 

     hdc.strokeStyle = 'red'; 
     hdc.lineWidth = 2; 

     // Fill the path 
     hdc.fillStyle = "#9ea7b8"; 
     hdc.opacity = 0.2; 
     hdc.fill(); 
} 

// And call the drawPoly function with coordinates. 
function drawPoly(coOrdStr) { 
     var canvas = byId('myCanvas'); 
     hdc.clearRect(0, 0, canvas.width, canvas.height); 

     var mCoords = coOrdStr.split(','); 
     var i, n; 
     n = mCoords.length; 
     hdc.beginPath(); 
     hdc.moveTo(mCoords[0], mCoords[1]); 
     for (i = 2; i < n; i += 2) { 
      hdc.lineTo(mCoords[i], mCoords[i + 1]); 
     } 
     hdc.lineTo(mCoords[0], mCoords[1]); 
     hdc.stroke(); 

    } 

Answer 1

Init() 
{ 
    var can = document.getElementById('myCanvas'); 
    h = parseInt(document.getElementById("myCanvas").getAttribute("height")); 
    w=parseInt(document.getElementById("myCanvas").getAttribute("width")); 

    // get it's context 
    hdc = can.getContext('2d'); 

    hdc.strokeStyle = 'red'; 
    hdc.lineWidth = 2; 

    // Fill the path 
    hdc.fillStyle = "#9ea7b8"; 
    hdc.fillRect(0,0,w,h); 
    can.style.opacity = '0.2'; 
} 

style.heightまたはstyle.widthキャンバスでは動作しませんように注意してください。

Answer 2

スタイル/ CSS：

<style>#myCanvas { background-color: rgba(158, 167, 184, 0.2); }</style> 

---

のjQuery：

$('#myCanvas').css('background-color', 'rgba(158, 167, 184, 0.2)'); 

---

はJavaScript：

document.getElementById("myCanvas").style.backgroundColor = 'rgba(158, 167, 184, 0.2)'; 

Answer 3

実際には、style.heightとstyle.widthはキャンバスで動作しますが、内部解像度を変更することなくサイズを変更することもできます。 400x300のゲームをフルスクリーンの1024x768キャンバスで実行しています。