WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML Drawing Tablet Code with Javascript
394
blackmagicoficial53
Open In Editor
Publish Your Code
Recommended
13 April 2024
HTML CSS Toggle Button
3 June 2025
A Code by alejandrokundrah
23 August 2025
Luxury Login Page HTML/CSS Template
HTML
Copy
Andev Web
CSS
Copy
* { margin: 0; } body { display: flex; align-items: center; justify-content: center; height: 100vh; } #canvas-container { width: 100%; height: 100vh; } .dt-control-container { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-top-right-radius: 8px; border-top-left-radius: 8px; border: 1px solid #404040; border-bottom: 1px solid transparent; background: #222222; display: flex; align-items: center; padding: 12px; } .dt-dc-container { border-left: 1px solid #404040; border-right: 1px solid #404040; display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; } .dt-default-colors { position: relative; border-radius: 50%; width: 28px; height: 28px; border: solid 2px transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; } .dt-default-colors div { width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; box-shadow: none; } .dt-cp-container { width: 28px; height: 28px; border: solid 2px transparent; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; } .dt-color-picker { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient( 50% 50% at 50% 50%, #ffffff 0%, transparent 100% ), conic-gradient( from 0deg at 50% 50%, #ff0000 0deg, #ffa800 47.73deg, #ffff00 79.56deg, #00ff00 121.33deg, #00ffff 180.99deg, #0000ff 238.67deg, #ff00ff 294.36deg, #ff0000 360deg ), #c4c4c4; transform: rotate(105deg); } .hide { display: none; } .dt-tools-container { position: relative; width: 50px; display: flex; align-items: center; justify-content: center; } .dt-tools-container img { position: absolute; max-height: 70px; bottom: -25px; transition: all 0.2s; cursor: pointer; } .dt-tools-container img:hover { bottom: -10px; opacity: 0.8; transform: scale(1.1); } #size { width: 35px; height: 30px; margin: 0 0.8rem; border: none; border-radius: 4px; background: #3d3d3d; color: #fff; font-size: 18px; font-weight: 500; -moz-appearance: textfield; } #size::-webkit-outer-spin-button, #size::-webkit-inner-spin-button { -webkit-appearance: none; } .dt-undo-redo-container { display: flex; align-items: center; justify-content: center; border-left: 1px solid #404040; padding: 0 0.8rem; } .dt-undo-redo-container img { width: 18px; cursor: pointer; } .dt-download-container { border-left: 1px solid #404040; padding: 0 0.8rem; } .dt-download-container img { width: 18px; cursor: pointer; } #redo { margin-left: 0.8rem; }
JS
Copy
let opts = { brushColor: "#ffffff", brushSize: parseInt(size.value) }; const dt = new DrawingTablet("#canvas-container", { logs: true, fullscreen: true, brushSize: opts.brushSize, bg: "#181818", color: opts.brushColor, autosave: true }); dt.log("Drawing Tablet Initialized"); const dcs = document.querySelectorAll(".dt-default-colors"); const dcp = document.querySelectorAll(".dt-cp-container"); dcs.forEach((e) => { e.children[0].style.background = e.dataset.color; selectColor(); e.addEventListener("click", () => { dt.brushColor = e.dataset.color; opts.brushColor = e.dataset.color; selectColor(); }); }); function selectColor() { dcs.forEach((el) => { el.style.border = `2px solid ${ opts.brushColor === el.dataset.color ? el.dataset.color : "transparent" }`; }); } dtPicker.addEventListener("input", (e) => { dt.brushColor = e.target.value; selectColor(); }); download.addEventListener("click", () => { dt.download(); }); undo.addEventListener("click", () => { dt.undo(); }); redo.addEventListener("click", () => { dt.redo(); }); clear.addEventListener("click", () => { const b = confirm("Are you sure to clear?"); if (b) { dt.clear(); } }); size.addEventListener("input", (e) => { dt.brushSize = parseInt(e.target.value); }); pencil.addEventListener("click", () => { dt.pencil(); dt.brushSize = parseInt(size.value); dt.brushColor = opts.brushColor; isSelected(); }); highlighter.addEventListener("click", () => { dt.highlighter(); dt.brushColor = opts.brushColor; isSelected(); }); eraser.addEventListener("click", () => { dt.eraser(); isSelected(); }); function isSelected() { if (dt.brushType === type.pencil) { document.querySelector("#pencil").style.bottom = "-10px"; document.querySelector("#highlighter").style.bottom = "-25px"; document.querySelector("#eraser").style.bottom = "-25px"; } else if (dt.brushType === type.eraser) { document.querySelector("#pencil").style.bottom = "-25px"; document.querySelector("#highlighter").style.bottom = "-25px"; document.querySelector("#eraser").style.bottom = "-10px"; } else if (dt.brushType === type.highlighter) { document.querySelector("#highlighter").style.bottom = "-10px"; document.querySelector("#pencil").style.bottom = "-25px"; document.querySelector("#eraser").style.bottom = "-25px"; } } isSelected();