Set background fill, stroke, and opacity of HTML5 Canvas

canvas, html, javascript, jquery

Solution

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';
}

Be careful that `style.height` or `style.width` will not work with canvas.

Problem

I use the below code to set styles of `myCanvas`, but I am not able to set `fillStyle`. Yet, `strokeStyle` and `lineWidth` is working fine. Could anyone please help with this? ``` 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(); } ```

Original source