This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Gregory J. Orton
Posted Sep 02 - Read on Facebook

Anybody know if we can create 'canvas' elements in framer?

'new Canvas'

doesn't seem to work?

6 Comments

Ray Yip

FYI. Here is how i create SVG element,
you can just replace it as "canvas"

svg = document.createElement "svg"
svg.setAttribute("width", Screen.width + "px")
svg.setAttribute("height", Screen.height + "px")

Ray Yip

Then
layerA = new Layer
layerA.html = svg.outerHTML

Gregory J. Orton

Oh yeah. I knew I had to add to the page somewhere - just didn't know how to attach it to the DOM! Thanks

Gregory J. Orton

Allright, I've managed to add a 'canvas' element to the DOM, and it's in the prototype - you can see it exists. 'getContext' is working - as you can print 'ctx' and it shows a 2D context - just not displaying any of the drawing functions. :(

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)

Gregory J. Orton

Does this mean that canvas is not supported in Framer? It's supported in Safari... so I don't see why it shouldn't work...

Gregory J. Orton

Found a way to do it. In fact, I found a Github Gist Koen Bok from 3 years ago!

https://gist.github.com/koenbok/7012440

It explains exactly how!

Read the entire post on Facebook