Drawing polygons using FabricJS

#1 · September 12, 2019, 3:53 pm

Hi luishp

I saw this simple script that works on jsfiddle, and thought it'd be great to include a triangle or other polygon 'codes' into a kids colouring/drawing project that I'm thinking of working on...

beginJS
var canvas = new fabric.Canvas('c');

var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});

canvas.add(triangle);
canvas.renderAll();
endJs

How do I add that into a working script in VisualNeo Web? I added BeginJS-EndJS and rename canvasID as "Container1" but it doesn't work. There are ample source codes around for fabricJS to do many things, like drawing hexagons, etc.

#2 · September 13, 2019, 9:35 am

@ronnie, this will work:

fabInitialize "Container1"
BeginJS
    containerId="Container1"
    var triangle = new fabric.Triangle({
      width: 20, height: 30, fill: 'blue', left: 50, top: 50
    });
    window["Canvas"+containerId].add(triangle);
    window["Canvas"+containerId].renderAll();
EndJS

Just note that you can access Fabric Canvas using: window["Canvas"+containerId]
It's created with fabInitialize command.
This way you can adapt any FabricJS script and even expand the current plugin capabilities.
Let me know if you want me to send you the plugin source code.
Regards.

#3 · September 13, 2019, 3:39 pm

Hi luishp

Thanks for the code. It works great on your fabricjs demo... but it doesn't work my current project. there has to be some bugs somewhere. Even the button that draws the Rect was OK. But the moment I copied and paste the Rect button and place it on another area, nothing appears on the screen. will troubleshoot them anyway...

Yes, I don't mind having the source plugin since it allows me to learn how you package the plugin. I've successfully created my CryptoJS plugin with some functions.. and perhaps that could lead me to release a plugin soon...

#4 · September 14, 2019, 2:22 pm

Just note that you can access Fabric Canvas using: window["Canvas"+containerId]
It's created with fabInitialize command.
This way you can adapt any FabricJS script and even expand the current plugin capabilities.

I totally agreed that the windows["canvas...] function is a very useful information that makes it much easier to port many external jsfiddle codes into VisualNeo Web with minimal modifications..

Thanks @luiship for the great help!

Drawing polygons using FabricJS - Forum

Drawing polygons using FabricJS