prototyping - Is it possible to use 'canvas' drawing functions in Framer JS? -


i have managed create , add canvas element framerjs prototype:

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) 

if print(ctx) shows valid canvasrenderingcontext2d output. problem is, nothing happens on prototype. remains blank - fillrect function never called.

need confirm if lack of support or if i'm doing wrong.

by setting html of layer canvas html, you're losing reference canvas created. fillrect called, not on canvas see :)

if remove html property , instead do:

container._element.appendchild(mycanvas) 

the reference canvas remains , you're drawing on canvas displayed.

full example:

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 project: http://share.framerjs.com/v4a1eyjv806s/


Comments