HTML2Canvas Transparent Background Capture

Hi @MaxZieb
I have been searching through the forum for examples of HTML2Canvas and want to screen grab the canvas with a resultant transparent background as an image and/or an animated video capture. I saw your examples of using HTML2Canvas, however, after researching I still haven't seen the light.

Two things I tried was to:

  • Checked background transparent option in Hype work area
  • Added option below in the javascript file.
    backgroundColor : null,

Using your example link below to capture a transparent png image and trying different javascript combinations, the resultant images remains to not be transparent.

The idea is to screen grab my flipping pig as a transparent image and a transparent video file format.

Reminder of the Pig animation:
PigFlipControl_ImageAlpha.hype.zip (339.7 KB)

Any assistance would be much appreciated.

Patrick McLean

seems to work out of the box:

tested it with @MaxZieb's file and it did ...

2 Likes

Hi @h_classen:
Thank you for reviewing the challenge.
When I bring the HTML2Canvas saved file into a mac photo app on my computer, the resultant .png doesn't seem to have an alpha channel or transparent background. I would expect to see only the dark text without any white, gray or black showing in the background.

Unfortunately, I do not see a transparent image being created right out of the box.

I did try the backgroundColor : 'null", option but my syntax could be incorrect.

I could very well be missing something.

Patrick (o:

As @h_classen suggested …

Also, if you have a full-size rectangle with a background color as an element in the container being captured, it will render in there. Either remove the element or set it to not use a fill.

CleanShot 2022-01-12 at 11.24.06

If you need a background color in the preview, but not when capturing, just use the document background or a rectangle outside the element being captured.

2 Likes

Thank you @h_classen and @MaxZieb for showing me how simple this was in the end.
I played around with the BGC null variable and even changed element transparent setting and as usual, you feedback again made the difference.

Image-with-Options_Transparent_BG_With_Forum_Help.hype.zip (67.5 KB)

Note: Original programming was done by @MaxZieb.

Patrick McLean (o:

2 Likes