вычисленный градиент в html2canvas не работает должным образом

Question

Я пытаюсь сделать снимок экрана страницы, на которой изображения наложены линейным градиентом с помощью html2canvas. Высота изображения варьируется, но ширина фиксирована на 210 пикселей, поэтому мне нужно использовать cal c для вычисления положений градиента, который не отображается так, как он выглядит на экране.

Пример со значениями stati c: https://jsfiddle.net/vpj3bz7s/1/

.linearGradient {
  height: 200px;
  width: 210px;
  background-image: linear-gradient(to top left,
      yellow 0%,
      yellow 80px,
      red 80px,
      red 110px,
      yellow 110px,
      yellow 100%);
}
html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
  }
);
<div class="linearGradient"></div>

Пример со значениями cal c: https://jsfiddle.net/dk309pf6/2/

.linearGradient {
  height: 200px;
  width: 210px;
  background-image: linear-gradient(to top left,
      yellow 0%,
      yellow calc(50% - 10px),
      red calc(50% - 10px),
      red calc(50% + 10px),
      yellow calc(50% + 10px),
      yellow 100%);
}

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
  }
);
<div class="linearGradient"></div>

Редактировать: Фактическое изображение, наложенное на градиент, выглядит следующим образом:

На скриншоте это выглядит так:

JS Скрипка с моим фактическим кодом выглядит следующим образом (но скриншот немного отличается от моего исходного)

https://jsfiddle.net/nrfjh8m3/1/

Answer 1

Вот другая идея для получения того же градиента. Существует множество способов, но нижеприведенный единственный, который работал с html2canvas:

body {
  margin: 0px;
}

.linearGradient {
  height: 200px;
  width: 210px;
  background-color:red;
  overflow:hidden;
   position:relative;
}
.linearGradient::before,
.linearGradient::after {
   content:"";
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
   background-repeat:no-repeat;
}
.linearGradient::before {
  background:linear-gradient(to bottom right,yellow 49%, transparent 50%);
  bottom:10px;
  right:10px;
}
.linearGradient::after {
  background:linear-gradient(to top left,yellow 49%, transparent 50%);
  top:10px;
  left:10px;
}

<div class="linearGradient"></div>

Рабочий код с html2canvas:

https://jsfiddle.net/k79ybnup/1/