拉斐尔
拉斐尔不使用画布。它在支持SVG的浏览器上使用SVG，在Internet Explorer上使用VML。

SVG

如果你想要一个专门为绘图设计的SVG解决方案，那么看看：

• SVG-edit

参见this demo。

画布

如果你想使用Canvas，但需要retained mode渲染，请参阅：

• Fabric.js
• Paper.js
• Processing.js
• EaselJS
• KineticJS
• bHive

更新（2014年2月）

• ART，一个保留模式的矢量绘图API --针对HTML5 Canvas、SVG和VML这三种语言（加上一些代码生成）。由Facebook团队与React UI工具包一起使用（请参见：GitHub上react-page项目的react-art和the "art" branch）。

Canvas完全符合这个目的：http://literallycanvas.com
Canvas是一个可扩展、开源（BSD许可）的HTML5绘图小部件...您可以使用它在网页中嵌入绘图板。

有processingJS，但由于它是基于JAVA的处理端口，因此您可以使用“javaish”处理语言编写代码。但毕竟你可以创建一个油漆一样的应用程序。另一个框架是fabricJS，它也非常适合使用canvas。

npm包spainter单击下面的运行代码片段并进入全屏

var p = new Painter(containerPainter);

<script src="https://cdn.jsdelivr.net/npm/spainter@1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.0.1/index.css"/>
<div id="containerPainter"></div>

或通过webpack（或任何其他加载器）：

npm i spainter lines-logger

在您的js中：

import Painter from 'spainter';
import 'spainter/index.sass'; // you can impor index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger';
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLoggerColor('spainter', 'blue')});

Live Demo

您可以尝试**Painterro**。它可以用于粘贴和处理屏幕截图，裁剪，绘制图元和文本，旋转，调整大小（改变分辨率），缩放，绘制箭头，导出所需的压缩级别，支持热键

Live Demo

Painterro有**browser-script版本和npm package**
可以很容易地与任何SPA（如Vue/React）集成，在electron/cordova中运行良好，
披露：我是画家的创始人

我认为最接近的是扩展教程已经经历了什么。
由于广泛的需求，很难创建“通用”类油漆功能。