Можно ли использовать функции рисования «холст» в Framer JS?

Question

мне удалось создать и добавить элемент холста в качестве прототипа FramerJS:

myCanvas = document.createElement "canvas" 
myCanvas.setAttribute("width","750px") 
myCanvas.setAttribute("height","500px") 
myCanvas.setAttribute("style","border: 2px solid black; background: #CCC") 

container = new Layer 
    height: 1334 
    width: 750 
    backgroundColor: "white" 
    html: myCanvas.outerHTML 
ctx = myCanvas.getContext "2d" 

ctx.fillStyle = "blue" 
ctx.fillRect(0, 0, 50, 50) 

Если вас print(ctx) это показывает действительный CanvasRenderingContext2D как выход. Проблема в том, что ничего не происходит на прототипе. Он остается пустым - как функция fillRect никогда не вызывалась.

Необходимо подтвердить, не связано ли это с отсутствием поддержки или если я что-то делаю неправильно.

Answer 1

Установив html слоя в холст html, вы теряете ссылку на созданный холст. Так FillRect называется, но не на холсте, вы на самом деле видите :)

Если удалить html свойства и вместо этого сделать:

container._element.appendChild(myCanvas) 

Ссылка на ваш холст остается, и вы на самом деле, опираясь на холст, который отображается.

Полный пример:

myCanvas = document.createElement "canvas" 
myCanvas.setAttribute("width","750px") 
myCanvas.setAttribute("height","500px") 
myCanvas.setAttribute("style","border: 2px solid black; background: #CCC") 

container = new Layer 
    height: 1334 
    width: 750 
    backgroundColor: "white" 

container._element.appendChild(myCanvas) 
ctx = myCanvas.getContext "2d" 

ctx.fillStyle = "blue" 
ctx.fillRect(0, 0, 50, 50) 

Framer проект: http://share.framerjs.com/v4a1eyjv806s/