Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add graphics layers #462

wants to merge 3 commits into
base: master


None yet
2 participants
Copy link

commented Jan 3, 2017

Add SVGLayer, CanvasLayer.


  • .svg: SVGSVGElement the svg element in the dom.
  • .addShape(shape: string): SVGXXXElement create a new SVG element.


We automatically correct the canvas for retina.

  • .canvas: HTMLCanvasElement the canvas element in the dom.
  • .ctx: CanvasRenderingContext2D the canvas 2d context.

koenbok added some commits Dec 28, 2016

@koenbok koenbok self-assigned this Jan 3, 2017


This comment has been minimized.

Copy link

commented Jan 4, 2017

Added two features to CanvasLayer, which might miss the point but I'll share them anyway. Since I don't see this being used, I didn't bother with PR'ing this branch, so here's the Framer Cloud link instead.

Added features:
1.layer.image per default draws local images to the layer's canvas, instead of applying it to the layer itself.
2. layer.pixel[x][y], a convenient way to access the color value of a certain pixel of the canvas. Returns a Color-object.


  • Provide onPixelsReady-method

CanvasLayer feature requests:

  • Methods: Draw pixels / lines / rectangles / ellipses to canvas (parity with SVGLayer)
  • Use backgroundColor to fill the canvas, instead of applying it to the layer's background (Why would anyone want to do that?)

CanvasLayer feedback:

  • In my opinion, CanvasLayers' backgroundColor should be set to null only after a canvas color or canvas image was set. Until then the default backgroundColor should be used.

@on("update:frame", @_update)

This comment has been minimized.

Copy link

marckrenn Jan 13, 2017


You sure this shouldn't be @on("change:frame", @_update)?
At least this change (no pun) gives me the result I was expecting.

This comment has been minimized.

Copy link
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.