Possible Drawing Surface?

[zoomclub]

Maybe I can get a little clarification. I'm hoping to use opentype.js to draw to a canvas. I would like to have a stack of canvas layers, targeting specific drawing instructions to specific layers in the stack.

The canvases would all be the same size and use their own transparency settings so there would be a blended composite image resulting from the complete stack of canvas layers. The layers would fill the viewport and be the main app UI (not just be an aside scroller widget).

Is this the kind of thing that react-canvas is intended for?

[mjohnston]

You can have multiple Surface elements, each with their own drawing context, and arrange those using CSS. React Canvas does not currently expose the actual canvas drawing context, though this could change with custom components.

In the meantime you might want to check out react-art which will give you more control over the drawing context.

[zoomclub]

No sorry, do not need or want a scenegraph API like react-art, my "scenegraph" has all migrated over into state, so I now refer to it as a datagraph. Well structured state and a canvas context is all that is required.

I am just looking for a good layer and canvas library. How can react-canvas even be a "canvas" solution without exposing the canvas2D context!?

[mjohnston]

Sorry, I misspoke. You actually can access the canvas2D context like so:

componentDidMount: function () {
  var ctx = this.refs.surface.getContext();
},

render: function () {
  return (
    <Surface ref='surface'>..</Surface>
  );
}

But once you start drawing into the canvas directly you lose the benefits of the React Canvas model.

[zoomclub]

Great! What is the React-Canvas Model? How does this break? Please explain more, all I want to do is have layers and be able to draw to them using the standard canvas2D API.

[alexanderritola]

I'm wondering the same things @zoomclub is. I'm trying to call cxt.moveTo() and cxt.lineTo(), and while it appears they exist in CanvasRenderingContext2d.__proto__ I can't figure out the correct way to do what I'm trying to (I just want to draw a simple grid).

[mjohnston]

@zoomclub I meant that react-canvas doesn't try to be an all-purpose drawing engine. Rather, the goal is to find a higher performance rendering backend for mobile devices than DOM, while still having a declarative API that is familiar to developers. See the issue re: shape support to see how we are planning to make the drawing engine more extensible, and allow authors to write custom components that perform their own drawing.

@alexanderritola If you have a specific use case in mind, let me know. Something like react-art or plain canvas might be better for what you're trying to do.