fabric.js，在 contextTop 上创建一些形状答案

【问题标题】：fabric.js, create some shapes on contextTopfabric.js，在 contextTop 上创建一些形状
【发布时间】：2018-08-31 14:47:31
【问题描述】：

这是一个关于fabric.js 的问题。我一直在尝试在 contextTop 上创建一些形状。当您在 contextTop 上创建一些形状时（不使用 add），如何将它们与 fabric.js 画布合并？

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

然后，我想让 Rect 出现在画布上。我应该怎么办？谁能告诉我如何在fabric.js中使用canvas API？

contextTop、contextContainer 看不懂……

【问题讨论】：

查看基本的 fabric.js 示例并使用 fabric.js api 创建形状。这将向 fabric.js 画布添加形状，fabric.js 将了解并跟踪它自己的画布上的所有对象。这就是它的工作原理，不要尝试使用自己的 html5 画布并合并。
不，我想知道它是如何工作的，而不是简单地使用它，先生
网络上有许多示例和教程以及解释其“如何”工作的文档。 Stack Overflow 适用于那些尝试过但未能成功的用户，他们发布了问题以及他们试图就特定问题寻求帮助。过于宽泛的问题可能会被关闭。阅读文档，并首先在线查找 fabric.js 教程会对您有很大帮助。
我应该怎么做才能在织物画布上显示特定的矩形？codepen.io/kangax/pen/lpAnD，比如 freedrawingBrush
在fabricjs 免费画笔availabale，你可以使用它。还有一些tutorial

【解决方案1】：

您不能直接使用画布 API。
FabricJS 是一个在画布上工作的框架，你必须使用框架规则，否则它会崩溃。

ContextTop 是来自 upperCanvas 的 getContext('2d') 的结果，其中 upperCanvas 是一个叠加在主画布之上的画布，用于进行一些不需要完全画布刷新的快速绘图。

在提供的 API 之外完成的所有 html5 画布绘制都将在下一帧被擦除。

要绘制矩形，您必须创建矩形类并将其添加到画布中，这是正确的方法：

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

【讨论】：