EzDev.org

react-canvas

react-canvas - High performance <canvas> rendering for React components


How can I use Fabric.js with React?

I have an application using heavily HTML5 canvas via Fabric.js. The app is written on top of Angular 1.x, and I am planning to migrate it to React. My app allows writing text and drawing lines, rectangles, and ellipses. It is also possible to move, enlarge, shrink, select, cut, copy, and paste one or more of such objects. It is also possible to zoom and pan the canvas using various shortcuts. In short, my app utilizes Fabric.js to its full extent.

I couldn't find much information on how to use Fabric.js together with React, so my concern is that 1. is it possible without major modifications, and 2. does it make sense or should I instead use some other extensive canvas library that has better support for React?

The only example of React+Fabric.js I could find, was react-komik, which however is much more simpler than my app. My main concerns are the event processing and DOM manipulation of Fabric.js, and their effect on React.

There seems to be also a canvas library for React, called react-canvas, but it seems lacking a lot of features compared to Fabric.js.

What do I have to take into account (regarding DOM manipulation, event processing, etc.) when using Fabric.js in a React app?


Source: (StackOverflow)

Weird issues with react-canvas (Invariant violation)

Using react 0.13.3 and a fresh react-canvas. I'm getting

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

With the following piece of code. It's generated from a compile-to-jsx language so looks a bit ugly even after cleaning it up a bit.

define(["reactcanvas", "layout", "jquery", "underscore", "react"],
function(ReactCanvas, Layout, $, _, React){
    var
        ReactCanvas_Surface = ReactCanvas.Surface,
        ReactCanvas_Image = ReactCanvas.Image;

    var ReactCanvas_Surface_Factory = React.createFactory(ReactCanvas.Surface);
    var ReactCanvas_Image_Factory = React.createFactory(ReactCanvas.Image);
    var App = React.createClass({

        render: function render(){
            return (
                ReactCanvas_Surface_Factory({
                        top:0,
                        left:0,
                        width:420,
                        height:420
                    }, ReactCanvas_Image_Factory({
                        src:"img/tits.jpg"
                    }))

            );
        }

    });

    var App_Factory = React.createFactory(App);
    App.createMain = function createMain(el,data){

        React.render(App_Factory(), el[0]);
    }
    return App;

});

Source: (StackOverflow)