sqq5682/fabric-drawing-board-plugin

fabric-drawing-board npm package

fabric-drawing-board

• Just simple drawing board lib by fabric

• repo: https://github.com/CC4J/fabric-drawing-board-plugin

Install

npm i --save fabric-drawing-board

How to use

Prepare your canvas element

<div style="width: 1000px;height: 600px">
	<!-- fabric-drawing-board automatically set the width and height of the canvas to the width and height of the canvas parent node -->
	<canvas id="myCanvasId"></canvas>
</div>

import FabricDrawingBoard from "fabric-drawing-board";

const fdb = new FabricDrawingBoard({ canvasId: "myCanvasId" });

Repo

• https://github.com/CC4J/fabric-drawing-board-plugin

Demo

• https://github.com/CC4J/fabric-drawing-board-plugin-demo

or

• clone this repo
• npm install
• npm run serve
• open localhost:8080

APIs

init

const fdb = new FabricDrawingBoard({ canvasId: "myCanvasId" });

// or pass more params

const fdb = new FabricDrawingBoard({
	canvasId: "myCanvasId", // canvas element id, Required
	brushColor: "rgb(0, 0, 0)", // free draw color
	strokeColor: "rgb(0, 0, 0)", // stroke color of line, rect, circle, text
	fillColor: "rgba(0, 0, 0, 0)", // fill color of rect, circle
	bgColor: "rgba(0, 0, 0, 0)", // background color of canvas
	textEditBgColor: '#fff', // text edit area background color
	brushSize: 4, // free draw width
	strokeSize: 4, // stroke width of line, rect, circle
	eraserSize: 4, // eraser width
	fontSize: 18, // font size of text
});

getFabric()

// return fabric
const fabric = fdb.getFabric();

getFabricCanvas()

// return new fabric.Canvas()
const fabric_canvas = fdb.getFabricCanvas();

setBrushColor()

// set free draw color
fdb.setBrushColor("#000");
fdb.setBrushColor("rgb(0,0,0)");
fdb.setBrushColor("black");

setStrokeColor()

// set line, rect, circle, text stroke coloe
fdb.setStrokeColor("#000");
fdb.setStrokeColor("rgb(0,0,0)");
fdb.setStrokeColor("black");

setFillColor()

// set rect, circle fill color
fdb.setFillColor("#000");
fdb.setFillColor("rgb(0,0,0)");
fdb.setFillColor("rgba(0,0,0,0)");
fdb.setFillColor("black");

setBgColor()

// set canvas background color
fdb.setBgColor("#000");
fdb.setBgColor("rgb(0,0,0)");
fdb.setBgColor("rgba(0,0,0,0)");
fdb.setBgColor("black");

setTextEditBgColor()

// set text edit area background color
fdb.setTextEditBgColor("#000");
fdb.setTextEditBgColor("rgb(0,0,0)");
fdb.setTextEditBgColor("rgba(0,0,0,0)");
fdb.setTextEditBgColor("black");

setBrushSize()

// set free draw width
fdb.setBrushSize(4);

setEraserSize()

// set eraser width
fdb.setEraserSize(4);

setStrokeSize()

// set line, rect, circle stroke width
fdb.setStrokeSize(4);

setFontSize()

// set text font size
fdb.setFontSize(18);

drawBrush()

// draw freely on canvas
fdb.drawBrush();

drawLine()

// mouse to draw line freely on canvas
fdb.drawLine();

drawRect()

// use mouse to draw rect freely on canvas
fdb.drawRect();

drawCircle()

// use mouse to draw circle freely on canvas
fdb.drawCircle();

drawText()

// input everything on canvas
fdb.drawText();

useEraser()

// use mouse to erasing anything on canvas
fdb.useEraser();

useMove()

// use mouse to move canvas
fdb.useMove();

canvasZoomUp()

// enlarge canvas
fdb.canvasZoomUp();

canvasZoomDown()

// zoom out the canvas
fdb.canvasZoomDown();

canvasUndo()

// undo the current operation
fdb.canvasUndo();

canvasRedo()

// restore current operation
fdb.canvasRedo();

canvasClear()

// empty canvas
fdb.canvasClear();

canvasExport()

// export canvas to base64 data
fdb.canvasExport((data) => {
	// save to local or upload here
});