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

Explorer ,
Mar 10, 2022 Mar 10, 2022

Copy link to clipboard

Copied

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!

TOPICS
Code , How to

Views

29

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation