Background image with alpha not working as expected

[paulcanning]

Using the following simply code, the alpha parameter simply has no effect

function setup() {
    ...
    bg = loadImage('bg.jpg');
    ...
}

function draw() {
    ...
    background(bg, 10);
    ...
}

If you replace bg in background() with a colour value, you see trails on screen, which is correct, but with the image, there are no trails, effectively, the alpha value doesn't work. You can test this by changing the alpha value to anything and there is no difference. I tried ranges 0-1, and 0-255.

NB - this issue, #1906, was closed, with @limzykenneth stating background() could not accept an image, which is false, proven by the fact you can indeed load an image using background() and the documentation even states you can use an image and an alpha value.

[paulcanning]

So, either the documentation is incorrect, or its correct and someone forgot to write this feature properly

p5.js/src/core/p5.Renderer2D.js

Lines 49 to 51 in 374acfb

	if (args[0] instanceof p5.Image) {
	this._pInst.image(args[0], 0, 0, this.width, this.height);
	} else {

The alpha argument is simply disregarded when loading an image. 🤦

[two-ticks]

I tried the same and read the documentation, it mentions background(image, [a]). It is not working properly. I would like to work on this issue if you are not working on it.

[JalokimFreelance]

I guess the easy fix would be just using tint() before using image().
https://p5js.org/reference/#/p5/tint

[lmccart]

@two-ticks great, I will assign you

[Palaksharma23]

Can I work on this issue , if no one is working on it. I would love to work on this issue .

[paulcanning]

@Palaksharma23 this was already assigned to someone if you look at the activity log

[two-ticks]

Hi @Palaksharma23! I am working on this issue in PR #5225. I have fixed the problem partially (not optimized), it would be great if you can fix the issue. If you have any improvements or want it to be reassigned to you, you can ask maintainers on the PR (#5225).