Динамическое добавление новых полотенец

Question

Я работаю над проектом, который требует создания нескольких элементов холста (отдельные столбцы, каждый из которых представляет один отдельный градиент). Я хотел бы сделать это динамически с fabric.js, например:

function add_gradient(color_stops){ 
    // Add a new rectangular canvas with fill representing specified gradient 
    var grad_box = document.getElementById("divWithCanvases"); 

    var newCanvas = document.createElement("canvas"); 
    grad_box.appendChild(newCanvas); 

    var gradCanvas = fabric.Canvas(newCanvas, {width: 500, height:50}); 
    var ctx = gradCanvas.getContext('2d'); 
    // Do stuff to canvas... 
} 

Однако вызов fabric.Canvas завершается с ошибкой «this.initialize не определен». (Fabric.js линия 1627, версия 1.4.13)

Как я могу либо:

1. Сформировать новую ткань холста на основе HTML-элемента (вместо строки идентификатора), или,
2. Добавить в DOM автоматически созданный новый элемент холста? (Форма fabric.Canvas() без аргументов будет делать ... что-то ... но она не может быть использована с appendChild)

Согласно fabric.js documentation, то fabric.Canvas конструктор принимает либо HTMLElement или Идентификатор элемента строки. Я могу только заставить его работать со строкой.

Answer 1

Функция fabric.Canvas является конструктором, вы должны вызвать его с new operator:

var gradCanvas = new fabric.Canvas(newCanvas, {width: 500, height:50});