Fabri c. js - необходимо использовать шаблон заливки с цветом заливки для многоугольника

Question

У меня есть форма, настроенная через fabri c. js, и я пытаюсь использовать fill для достижения 2 целей одновременно:

1) rgba Цвет заливки rgba (255,0,0,0,5)

И

2) A fabric.Pattern изображением SVG с прозрачностью.

Я могу сделать fill цвет и fill fabric.Pattern с SVG-изображением отдельно , но я не могу понять, как сделать их вместе

код, который я использую :

var canvas = this.__canvas = new fabric.Canvas('c');

//To set the pattern with an SVG image
function loadPattern(url) {
    fabric.util.loadImage(url, function(img) {
      shape.set('fill', new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      }));
      canvas.renderAll();
   });
}

//To set just a color
function setColor(color) {
   shape.set('fill', color);
   canvas.renderAll();
}

//To set the backgroundColor
function setbackgroundColor(color) {
   shape.set('backgroundColor', color);
   canvas.renderAll();
}

var shape = new fabric.Polyline([
    {x: 78, y: 138},
    {x: 146, y: 96},
    {x: 170, y: 117},
    {x: 275, y: 127},
    {x: 275, y: 216},
    {x: 78, y: 138}
    ], {
    fill: 'rgba(255,0,0,0.5)',
    stroke: 'red',
    left: 100,
    top: 100
});

canvas.add(shape);

Вот как это выглядит при использовании fill только с цветом:

Вот как это выглядит при использовании fill только с шаблоном:

Я пытался использовать fill с шаблоном плюс `` `shape.backgroundColor = 'rgba (255,0,0,0.5 ) ';

Но вот что произошло:

Цель состоит в том, чтобы в фигуре содержались как цвет, так и рисунок:

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

//To set the pattern with an SVG image
function loadPattern(url) {
    fabric.util.loadImage(url, function(img) {
      shape.set('fill', new fabric.Pattern({
        source: img,
        repeat: 'repeat'
      }));
      canvas.renderAll();
   });
}



//To set just a color
function setColor(color) {
   shape.set('fill', color);
   canvas.renderAll();
}

//

function setbackgroundColor(color) {
   shape.set('backgroundColor', color);
   canvas.renderAll();
}

var shape = new fabric.Polyline([
    {x: 78, y: 138},
    {x: 146, y: 96},
    {x: 170, y: 117},
    {x: 275, y: 127},
    {x: 275, y: 216},
    {x: 78, y: 138}
    ], {
    fill: 'rgba(255,0,0,0.5)',
    stroke: 'red',
    left: 100,
    top: 100
});

canvas.add(shape);

canvas {
    border: 1px solid #999;
}
button {
    margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<button onclick="loadPattern('https://www.heropatterns.com/svg/anchors-away.svg');">Set pattern</button>
<button onclick="setColor('rgba(255,0,0,0.5)');">Set color</button>
<button onclick="setbackgroundColor('rgba(255,0,0,0.5)');">Set backgroundColor</button>
<button onclick="setbackgroundColor('transparent');">Set backgroundColor to transparent</button>
<canvas id="c" width="400" height="400"></canvas>

Вот мой jsFiddle: http://jsfiddle.net/shehan11/1vgps2dw/5/

Спасибо за вашу помощь!