不透明度不应用JavaScript画布

Question

I am calling my method drawInventory() when my mouse moves and when I press i.

I set the opacity at the start of the drawInventory Method:

 function drawInventory() {
inventoryCtx.fillStyle = "rgba(0, 0, 0, 0.7)";
inventoryCtx.fillRect(10, 10, invWidth-20, invHeight-20);
 }

When I move the mouse, the opacity stays at .7 correctly, however after pressing i, the opacity decreases.

Here is the method I call upon the i keypress:

    function toggleInventory() {
    if(!showInventory) {
        showInventory = true;
        $("#inventoryCanvas").removeClass("hideClass");
        drawInventory();
        $("#inventoryCanvas").fadeIn(1);
    }
    else {
        $("#inventoryCanvas").fadeOut(100);
        showInventory = false;
    }
};

The strange part is, the first time after refreshing the page and pressing i the opacity is there. If I press i twice, it comes back with even higher opacity (darker) then the next time it is completely dark. I do not know why it is losing opacity each time when I am calling the same method.

Note: I've tried inventoryCtx.globalAlpha, it does not change the issue.

Any help is appreciated.

Answer 1

A canvas object is an image and is initially completely transparent.

When you draw on it using the context however the pixels are changed to reflect your drawing.

If you draw a second time on it you will start from what is currently on the canvas and that's why it seems to you that the opacity is not applied; the reason is that it's applied but on pixels that are already not completely transparent.

Note that hiding and showing the element doesn't wipes off its content. Each canvas instance will remember the value of its pixels even if you move it around the DOM tree.

To keep repeatable results when drawing you need to clear the canvas on starting of the paint procedure using

canvas.clearRect(0, 0, canvas.width, canvas.height);

or by setting the canvas object size with

canvas.width = canvas.width;

as resizing a canvas has the documented side effect of clearing its content even if the size remains exactly the same.