Allow background transparency

[raquelhortab]

I'm just leaving this here in case it is useful for somebody else. I wanted to set a semi transparent color as background and I realized the library does not allow that. I only had to change this:

bgColor=null!=e&&6==e.length&&validateColor(e)?"#"+e:"gray",

to

bgColor=null!=e?"#"+e:"gray",

of course, it might break some things. For instance, if the color is incorrect, it won't work well. Also, in my case, I am not showing the anything else than the cube (not the button bar or counter) so I am not sure how this could affect them.

[raquelhortab]

nevermind, it does break things, whenever you move the cube it results in weird behaviours, it's a pity because a transparent background would allow placing images behind and therefore getting a nicer, not-so-basic style

[raquelhortab]

I see that the only time it breaks is when I rotate the cube, if I resize the window, the background is transparent again. It could be due to the paint function. It redraws it without transparency but keeping the base color.

[raquelhortab]

I believe it could be due to graphics.fillRect being called multiple times, painting the same over and over and therefore it ends up not being transparent

[raquelhortab]

seems to work by changing this:

(setClip(graphics, 0, 0, width, height),
        graphics.fillRect(0, 0, width, height)) : (setClip(graphics, 0, 0, width, height - dpr),
         graphics.fillRect(0, 0, width, height - dpr))

to this:

(setClip(graphics, 0, 0, width, height),
        graphics.clearRect(0, 0, width, height), graphics.fillRect(0, 0, width, height)) : (setClip(graphics, 0, 0, width, height - dpr),
        graphics.clearRect(0, 0, width, height - dpr), graphics.fillRect(0, 0, width, height - dpr))

[mfeather1]

Yes, that's a nice feature!

I would suggest modifying the unminified code (https://github.com/cubing/AnimCubeJS/blob/gh-pages/sources/codes/js-unminified/AnimCube3-unminified.js), change the first two occurrences of fillRect to clearRect in the paint function (which is same as you have done to minified code) and then minify with https://animcubejs.cubing.net/sources/codes/js-minification/minifier.html (or other minifier of choice) but either way will work.

[raquelhortab]

yes it did give it a nice and personalized look! see

thanks a lot for this nice library :)

[mfeather1]

Cool! Transparency gives flexibility to have much more interesting backgrounds for the cube display, thanks for the new feature. :)