Change background color of JavaScript canvas animation

Question

I found this fantastic HTML5 fire animation online [credit: iBasskung on YouTube] and I'm trying to figure out how to make the black background transparent. I'm an intermediate JS coder but it seems like the background is part of the fire and needs an opacity of 0.

I've examined the color array and flame renderer, but I don't see any hex or rgba values anywhere.

Thoughts on how to extricate the black bg from the flames themselves?

FIDDLE

// color array
for (i = 0; i < 32; ++i) {
    colors[i][2] = i << 1;
    colors[i + 32][0] = i << 3;
    colors[i + 32][2] = 64 - (i << 1);
    colors[i + 64][0] = 255;
    colors[i + 64][1] = i << 3;
    colors[i + 96][0] = 255;
    colors[i + 96][1] = 255;
    colors[i + 96][2] = i << 2;
    colors[i + 128][0] = 255;
    colors[i + 128][1] = 255;
    colors[i + 128][2] = 64 + (i << 2);
    colors[i + 160][0] = 255;
    colors[i + 160][1] = 255;
    colors[i + 160][2] = 128 + (i << 2);
    colors[i + 192][0] = 255;
    colors[i + 192][1] = 255;
    colors[i + 192][2] = 192 + i;
    colors[i + 224][0] = 255;
    colors[i + 224][1] = 255;
    colors[i + 224][2] = 224 + i;
  }

// render the flames
for (let y = skipRows; y < canvasHeight; ++y) {
  for (x = 0; x < canvasWidth; ++x) {
    index = y * canvasWidth * 4 + x * 4;
    let value = fire[(y - skipRows) * canvasWidth + x];

    data[index] = colors[value][0];
    data[++index] = colors[value][1];
    data[++index] = colors[value][2];
    data[++index] = 255;
  }
}

Zevan · Accepted Answer · 2019-11-10 16:57:28Z

1

The key here is understanding how setting/getting pixels works in canvas. Both getImageData and putImageData work with pixel values in a 1D array. You can see this in your code with the data array:

// red value 0-255
data[index] = colors[value][0];

// green value 0-255
data[++index] = colors[value][1];

// blue value 0-255
data[++index] = colors[value][2];

// alpha value 0-255
data[++index] = 255;

Because the fire has a full red value close to 255 you can just use the red channel for your alpha as well.

// alpha value 0-255
data[++index] = colors[value][0];

Here is a working version of your fiddle:

https://jsfiddle.net/jq6urawb/

answered Nov 10, 2019 at 16:57

Zevan

10.3k3 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change background color of JavaScript canvas animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related