How do I make a color invisible in a canvas using javascript

Question

I am making a clicker game where you click on a potato for stonks. I have this code:

var canvas, canvasContext, imgaeAssets;

window.onload = function() {
  canvas = document.getElementById('gaming');
  canvasContext = canvas.getContext('2d');
  canvasContext.canvas.width = window.innerWidth;
  canvasContext.canvas.height = window.innerHeight * 0.95;

  setInterval(mainloop, 1000 / 50);
}

var potatoes = 0;

var potatoClick = new Image();
potatoClick.src = 'images/potato.jfif'

function mainloop() { // runs once every second

  colorRect(0, 0, canvas.width, canvas.height, 'black')

  canvasContext.font = "15px Comic Sans MS";
  canvasContext.fillStyle = "white";

  canvas.style.backgroundColor = 'rgba(255, 255, 255, 0)';
  drawImg(potatoClick, 0, (canvas.height / 2) - 125, 500, 250)

  if (potatoes > 0) {
    canvasContext.fillText(`you have ${potatoes} potatoes`, 0, 30);
  }
}

function colorRect(x, y, w, h, c) {
  canvasContext.fillStyle = c;
  canvasContext.fillRect(x, y, w, h);
}

function drawImg(src, x, y, w, h) {
  canvasContext.drawImage(src, x, y, w, h);
}

function printMousePos(event) {}

I want to make the white in potatoClick transparent, but I can't figure out how. I've already tried assigning an alpha to it, and have also tried changing the opacity of the image, but neither have worked. If you could figure out how to make any color transparent, I would appreciate it. I wouldn't mind needing to change the way to draw the potato, but I think it would be cleaner and easier the way I have it now.

edit: I think my question was fundamentally flawed, sorry for the confusion

` I've already tried assigning an alpha to it,` where? `tried changing the opacity of the image` where? think of canvas as a canvas ... if you want to paint invisible colour on a real canvas, you simply don't touch the canvas with paint — Jaromanda X, Jul 28 '22 at 03:19
“_you simply don't touch the canvas with paint_”: or, you memorize what was behind your paint and re-paint the parts that you want to “appear invisible” with what was there before you started painting — jsejcksn, Jul 28 '22 at 03:22

Lukas · Answer 1 · 2022-07-28T08:16:17.880

After drawing things at canvas, you can't edit them anymore. Because, Image in canvas doesn't have any parameters after draw it. It means if you want to edit image on canvas, you need to clear your canvas when the difference is occurred.

and if you want to change the image opacity you should set globalAlpha of ctx (draw image with opacity on to a canvas)

Usually, I use Fabric.js(http://fabricjs.com/) for solve that problem. but If you want, you can make a your own renderer by defining simple class.

like this!

<body>
    <img id="dog" src="https://cdn.pixabay.com/photo/2022/07/19/10/35/puppies-7331739__340.jpg">

    <img id="woman" src="https://cdn.pixabay.com/photo/2021/05/04/20/57/woman-6229693__340.jpg">

    <canvas id="canvas" width="500" height="500" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        var canvas;
        var ctx;
        var img;

        window.onload = function () {
            canvas = document.getElementById("canvas");
            ctx = canvas.getContext("2d");
            
            dog = document.getElementById("dog");
            woman = document.getElementById("woman");
            const exam1 = new Image(dog);
            const exam2 = new Image(woman);

            images = [];
            images.push(exam1);
            images.push(exam2);

            render(images);
            
            dog.onclick = function () {
                exam1.opacity = 0.7;
                exam2.opacity = 0.3;
                exam1.y += 10;
                exam2.x += 10;
                render(images);
            }
        }

        function render(images) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < images.length; i++) {
                images[i].render();
            }
        }

        function Image(original) {
            this.image = original;
            this.width = this.image.width;
            this.height = this.image.height;
            this.opacity = 1.0;

            this.x = 0;
            this.y = 0;
        }

        Image.prototype.render = function () {
            this.image.width = this.width;
            this.image.height = this.height;
            ctx.globalAlpha = this.opacity;
            ctx.drawImage(this.image, this.x, this.y);
            ctx.globalAlpha = 1.0;
        }


    </script>

</body>

How do I make a color invisible in a canvas using javascript

1 Answers1