fabric.js, create some shapes on contextTop

Question

This is a question about fabric.js. I have been trying to create some shapes on the contextTop. When you create some shapes on contextTop(not using add ), how to merge them with the fabric.js canvas?

let canvas = new fabric.Canvas('C');
canvas.contextTop.StrokeRect(12,12,30,30);

Then, I want to make the Rect appear on the canvas. What should I do? Could anybody tell me how to use canvas API in fabric.js?

I do not understand contextTop, contextContainer...

Answer 1

You can't use canvas API directly.
FabricJS is a framework to work on the canvas and you have to use the framework rules, or it will break.

ContextTop is the result of getContext('2d') from the upperCanvas, where the upperCanvas is a canvas layered on top of the main one to do some quick drawing that does not require full canvas refresh.

All the html5 canvas drawing that are done outside the provided API will be wiped at the next frame.

To draw a rect you have to create the rect class and add it to the canvas, that is the correct way to do it:

var rect = new fabric.Rect({ width: 200, height: 300 });
canvas.add(rect);