HTML5 Canvas: Use javascript to change the color of lib.properties color?

Report · Mar 10, 2022

I am using CCapture.min.js to create animated gifs from my canvas animation for users to download - the problem is, CCapture does not support alpha channel transparency.

So, I thought to make the Animate stage color not visible; alpha 0, then remove all background color reference in the HTML: animation_container and canvas inline style.

I added to the page an input that changes the background color inline style for the canvas element, which does show the color through the transparent bit of my animation. Based on http://jsfiddle.net/Xotic750/QXKSX/

 if (rxValidHex.test(color)) {
        document.getElementById("canvas").style.background = color;
    }

However, when downloaded, the gif does not record the canvas element background color, but only what lib.properties: color in the animate's .js file specifies (around line 830)

// library properties:
lib.properties = {
	id: 'BBF48DACC7820525246EC5C2330E0353',
	width: 204,
	height: 40,
	fps: 24,
	color: "#FFFFFF",

I saw a tutorial about changing the color of a canvas via javascript, but to no avail. I altered the script like so:

    if (rxValidHex.test(color)) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = color;
    }

I also tried lib.properties.color = color; but no dice.

Is there a way to alter the properties of lib.properties.color via script?

Or would it be easier to somehow target an object in the canvas and assign it's color by HEX# from the DOM? If so, where can I find out how?

Thanks!