Set background fill, stroke, and opacity of HTML5 Canvas

Question

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();

    }

score 21 · Accepted Answer · edited Mar 20 '17 at 00:22

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.

forsvunnet · Answer 2 · 2015-12-29T10:59:19.787

18

Style / 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)';

edited Dec 29 '15 at 10:59

answered Dec 10 '13 at 08:13

forsvunnet

1,238
10
17

8

Why using jQuery to add CSS? – Volker E. May 02 '14 at 18:31
Because when working with canvas it's usually a benefit to be able to change the appearance with code. You are correct though, it's fully possible to do the same with plain css. – forsvunnet May 09 '14 at 05:54
This is a better solution than `fillRect` – Yan King Yin May 24 '16 at 01:21
This is not a better solution than fillRect in every case. BECAUSE: If you set this canvas as div background, canvas will not have background if you are using Canvas (which is set as background for a div) WILL have background, if you will use fillRect instead. In other cases jquery is much shorter solution than fillRect. – C.L. May 13 '17 at 22:31

score 2 · Answer 3 · answered Sep 06 '14 at 19:51

2

Actually, style.height and style.width do work with canvas, you can also set those to a different size without changing the inner resolution, e.g. running a 400x300 game in a fullscreen 1024x768 canvas.

answered Sep 06 '14 at 19:51

Diogo Schneider

339
2
9

1

If using canvas style properties instead of canvas element properties be sure you change the width & height proportionally or else any drawings on the canvas will be horizontally or vertically distorted. ;-) – markE Sep 06 '14 at 19:55
Well, sometimes that's exactly what you want, though. :) – Diogo Schneider Sep 07 '14 at 00:42

Set background fill, stroke, and opacity of HTML5 Canvas

3 Answers3

Linked