Search code examples
javascriptangularjsfabricjsangular-material

Fabricjs canvas inside Angular Material Tabs doesn't work

I have been trying to use Fabric.canvas inside angular material tabs (material.angularjs.org/latest/demo/tabs) but that doesn't seem to work. Finally I want there to be multiple tabs with multiple canvases. For now I'm trying it with only one tab.

This code without tabs seems to wok just fine, it allows free hand drawing with mouse pointer

But,

this html code with angular material tabs doesn't let any drawing or event on the canvas

The javascript code (at the end) used in both the files are the same

Solution

  • We need to wait for the angular tabs to load before initializing the canvas.

    If canvas is initialized first and then the angular tabs load then the original canvas no more exists.

    So, initializing the canvas using setTimeout(some_function_to_init_canvas, 50), would allow enough time for angular tabs to load first.

    This works fine, but a callback function would be more preferable.