niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.4k stars 4.78k forks source link

repeating-linear-gradient #1162

Open Elyos59 opened 7 years ago

Elyos59 commented 7 years ago

Hi!

Background is not rendered if iit's a repeating-linear-gradient ...

Any idea for that?

background: rgba(0, 0, 0, 0) repeating-linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255) 40px, rgb(255, 225, 35) 40px, rgb(255, 225, 35) 80px) repeat scroll 0% 0%;

leacoleaco commented 3 years ago

I finally use another lib 'dom-to-image' instead... it work fine https://github.com/tsayen/dom-to-image

Thrullerinn commented 2 months ago

After a few hours working on this there seems to be an alternative by using an svg Just put this is any manner into the the element you need the stripes in.

` <pattern id="pattern-checkers" x="0" y="0" width="100%" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(145)"

<line x1="0" y1="7" x2="100%" y2="7" stroke='#F3817F' strokeDasharray="8 4" /> <rect x="0%" y="0" width="100%" height="100%" fill="url(#pattern-checkers)" /> `