새로운 패브릭 캔버스를 동적으로 추가

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)

어떻게 I 중 하나를

1. 는, (대신 문자열 ID의) HTML 요소를 기반으로 새로운 패브릭 캔버스를 생성하거나
2. 자동 생성 된 새 캔버스 요소를 DOM에 추가 하시겠습니까? fabric.Canvas 생성자는는 HTMLElement, 또는 중 하나를 받아들이면 fabric.js documentation에 따르면

을 (인수없이 양식 fabric.Canvas는() ... 뭔가를 만들 것입니다 ...하지만 그것은 appendChild와 함께 사용할 수 없습니다) 문자열 요소 ID. 문자열로만 작동하도록 할 수 있습니다.

Answer 1

기능 fabric.Canvas 생성자, 당신은 new operator로 전화를해야 : 그것을 잡기위한

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