Set background color of canvas with html2canvas

Question

I'm using html2canvas to take screenshots from elements in a page

html2canvas(element).then(canvas => canvas.toDataURL());

Works find, but the only thing that goes wrong is that the background color of the page is ignored. Is there a way to fix this in html2canvas or to define a background color?

Does this answer your question? How to make transparent color white instead of black in html2canvas? — ColdIV
– ColdIV, Commented Jun 25, 2024 at 7:56
No it seems not. They suggest using _html2canvas which does not seem to exist — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Jun 25, 2024 at 8:09
The newer answers on that question might be what you are looking for. You can pass the background color as part of the options of html2canvas. — ColdIV
– ColdIV, Commented Jun 25, 2024 at 8:22
Ah, you're right. Its the other part of the accepted answer. html2canvas accepts a second argument in which you can define a backkgroundColor — Jeanluca Scaljeri
– Jeanluca Scaljeri, Commented Jun 25, 2024 at 8:53

Himanshu Soni · Accepted Answer · 2024-06-25 07:56:51Z

1

You can add the background color to element before snapshot and undo it after canvas generation.

const element = document.getElementById('your-element-id');

// Set background color of the element
element.style.backgroundColor = '#ffffff';  // Replace with your desired background color

// Use html2canvas to capture the element
html2canvas(element).then(canvas => {
    // Reset background color of the element after capturing
    element.style.backgroundColor = 'transparent';  // Reset to default or any other background style

    // Now you can use the canvas
    const dataURL = canvas.toDataURL();
    console.log(dataURL);
});

answered Jun 25, 2024 at 7:56

Himanshu Soni

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set background color of canvas with html2canvas

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related