How to generate a transparent canvas using html2canvas

Question

this seems like it should be a simple thing but it's crazily difficult.

I simply have a div DOM element with some text inside.

I'm calling the html2canvas method on it and it's working find.

The only problem, the canvas has a white background!

I tried:

Setting the background property on the options object to null
Explicitly changing the CSS background property to transparent on the canvas and the DOM element that it was being generated from

Unfortunately nothing seems to work.

Hopefully there is an elegant solution but a quick hack is okay.

May be this might help you https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5 — Sunil Kumar, Oct 13 '18 at 23:29

score 3 · Accepted Answer · answered Oct 14 '18 at 00:20

3

let el = document.querySelector("#my-div")
html2canvas(el,{backgroundColor:null}).then(canvas => {
  document.body.appendChild(canvas)  
})

answered Oct 14 '18 at 00:20

emi

That's exactly it. Many thanks! – Benjamin Sampson Oct 14 '18 at 02:11
`{backgroundColor:null}` is not working on my code **` html2canvas(document.querySelector(".resize-wrap"), { backgroundColor: null }).then(canvas => { this.dataURL = canvas.toDataURL(); _marker.MarkerImage = this.dataURL; this.MarkerLists.push(_marker); this.countMarker++; });`** – Awais Dec 11 '19 at 11:56

1 Answers1