Colors are different depending on physical screen monitor

Bug reports:

The colors are different depending on which monitor I generate and render the canvas.

If I generate the canvas on monitor 2, the PNG is darker. If I generate the canvas on monitor 1, the PNG looks correct.

I tried adding a background color of white to the wrapper div and canvas options but both did not work.

Code (React & Typescript project):

/*

- converts a <div> into a canvas, then sets the dataUrl to the download link: 
<a href={dataUrl} download={fileName} />

- function is called on componentDidUpdate, when data within the wrapper div is updated

*/

async setUpDataUrl(): void {
    try {
      const wrapperRef = this.wrapperRef.current; // <div>
      const downloadLinkRef = this.downloadLinkRef.current; // <a />

        const canvas = await html2canvas(wrapperRef);
        const imgData = canvas.toDataURL('image/png');

        downloadLinkRef.href = imgData;
      
    } catch (e) {
      console.log(e);
    }
  }

Steps to reproduce problem:

MONITOR 1 (Macbook Pro):

1: Data is updated within the wrapper div. This then triggers componentDidUpdate and setUpDataUrl(). 2. The wrapper div and download link are rendered. 3. I click on the download link and download the wrapper div as a PNG file. 4. The PNG looks just the same as the wrapper div:

MONITOR 2 (External portable monitor):

I repeat steps 1-3 above, but the colors are darker:

Specifications:

• html2canvas version tested with:
• Browser & version: Chrome 84.0.4147.89
• Operating system: macOS

[kaydeniz]

This solution may be useful for your problem, I use html2canvas in my app like this ;

html2canvas(document.querySelector("#divToPrint"), {scale: '2'}).then(canvas => { const imgData = await canvas.toDataURL('image/png'); });

Before I added {scale: '2'} I had same problem. I hope this method solves your problem.

[LeLunZ]

Works also in 2022! 😂