Have you ever wanted to create a stunning canvas in HTML but found it difficult to add the right tools and features? Look no further, this package includes a range of useful features to help you build beautiful and functional canvases. From a context menu and footer to an editor and carousel, this package has everything you need to create engaging and interactive canvases that will impress your users. In this article, I'll introduce you to the key features of my package and show you how to use them to create stunning canvases. It's the perfect tool for building impressive and user-friendly canvases.
Click the image to watch the video to view all features!
In terminal
npm i canvas-edit-tools
There are 4 different elements you can import:
<canvas height="790" id="myCanvas" width="1050"></canvas>
<div class="editor" id="editor"></div>
<footer>
<div class="toolbar">
<button id="undoBtn">Undo</button>
<button id="forwardBtn">Forward</button>
<button id="saveBtn">Save</button>
<button id="resetButton">Reset</button>
<span id="display">Display:</span>
<button id="html">HTML</button>
</div>
</footer>
<div id="contextMenu"></div>
import this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./node_modules/canvas-edit-tools/dist/canvas-edit-tools.js"></script>
</head>
on bottom:
</body>
<script>
CanvasEditTools.initialize();
</script>
</html>c="./node_modules/canvas-edit-tools/dist/canvas-edit-tools.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/canvas-edit-tools/dist/canvas-edit-tools.js"></script>
</head>
<body>
<div id="contextMenu"></div>
<div class="container">
<div class="left-side">
<div class="editor" id="editor"></div>
</div>
<div class="right-side">
<canvas height="790" id="myCanvas" width="1050"></canvas>
</div>
</div>
<footer>
<div class="toolbar">
<button id="undoBtn">Undo</button>
<button id="forwardBtn">Forward</button>
<button id="saveBtn">Save</button>
<button id="resetButton">Reset</button>
<span id="display">Display:</span>
<button id="html">HTML</button>
</div>
</footer>
</body>
<script>
CanvasEditTools.initialize();
</script>
</html>