Multiple canvases (pages) in Fabric.js

Question

I am trying to create multiple pages as canvases using Fabric.js on click of a button - e.g. every time the button is clicked a new page is created.

The problem I'm having is that I want these canvases to use the same functions which are created at when the page is loaded and are only assigned to the initial canvas. Is there a way to create instances of the canvas and still use those same functions?

Answer 1

My understanding of your question is that you are creating multiple canvases within a single HTML document.

When you are assigning functions to your initial canvas, do you mean they are being added as methods to your canvas object? I think it is better to wrap the canvas in another JavaScript object and assign methods to that object. Also, you can use prototype to define methods for a class, then these methods will be accessible by instances of that class. For example:

/* MyCanvas class */
function MyCanvas() {
    /* Creates a canvas */
    this.canvas = document.createElement("canvas");
    document.body.appendChild(this.canvas);
};

/* Define MyCanvas prototype */
MyCanvas.prototype = {
    /* Define getCanvas method */
    getCanvas: function() {
        /* Returns the real canvas object */
        return this.canvas;
    },

    /* Define get2DContext method */
    get2DContext: function() {
        /* Returns the 2D context */
        return this.canvas.getContext("2d");
    }
}

/* Create two canvases */
var myCanvas1 = new MyCanvas();
var myCanvas2 = new MyCanvas();

/* Access MyCanvas methods */
var canvas1 = myCanvas1.getCanvas();
var ctx2 = myCanvas2.get2DContext();

By the way, I've never used fabric.js.