"paint"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/positivestudio/pen/pNGoXX?limit=all&page=41&q=sketch" /> <style class="cp-pen-styles">#sketchpad { margin: auto; width: 100%; height: 800px; background-repeat: repeat; } .toolbar { width: 100%; min-width: 228px; background-color: #fafafa; text-align: center; padding: 14px; display: inline-block; } .toolbar .section { clear:both; margin-bottom: 8px; } .toolbar .slider { width: 100%; } .toolbar .button { float: left; width: 32px; height: 32px; line-height: 32px; cursor: pointer; text-align: center; } .toolbar .button.active { background-color: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, 1); } </style></head><body> <!-- Bootstrap core CSS --> <link href="https://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <script src="https://use.fontawesome.com/46af14eb3c.js"></script> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="toolbar" id="tools"> <div class="section files"> <div id="reset" class="button"><i class="fa fa-trash-o" aria-hidden="true"></i></div> <div id="tool-save" class="button"><i class="fa fa-save" aria-hidden="true"></i></div> <div id="tool-load" class="button"><i class="fa fa-folder-open-o" aria-hidden="true"></i></div> <div id="tool-screenshot" class="button"><i class="fa fa-camera-retro" aria-hidden="true"></i></div> </div> <div class="section drawing"> <div id="tool-pen" class="button active"><i class="fa fa-pencil" aria-hidden="true"></i></div> <div id="tool-highlighter" class="button"><i class="fa fa-paint-brush" aria-hidden="true"></i></div> <div id="tool-rainbow" class="button rbw"><i class="fa fa-magic" aria-hidden="true"></i></div> <div id="tool-mandala" class="button mandala"><i class="fa fa-snowflake-o" aria-hidden="true"></i></div> </div> <div class="section drawing"> <div id="tool-line" class="button line">╱</div> <div id="tool-rectangle" class="button rect"><i class="fa fa-square-o" aria-hidden="true"></i></div> <div id="tool-circle" class="button circ"><i class="fa fa-circle-thin" aria-hidden="true"></i></div> <div id="tool-type" class="button font"><i class="fa fa-font" aria-hidden="true"></i></div> <div class="section rubber"> <div id="tool-eraser" class="button"><i class="fa fa-eraser" aria-hidden="true"></i></div> <div id="tool-cutout" class="button"><i class="fa fa-scissors" aria-hidden="true"></i></div> </div> <div class="section special"> <div id="tool-rotate-viewport" class="button rotate-viewport"><i class="fa fa-circle-o-notch" aria-hidden="true"></i></div> <div id="tool-move-viewport" class="button move-viewport"><i class="fa fa-hand-paper-o" aria-hidden="true"></i></div> </div> <div class="section special"> <div id="tool-zoom-out" class="button"><i class="fa fa-search-minus" aria-hidden="true"></i></div> <div id="tool-zoom-1" class="button"><i class="fa fa-home" aria-hidden="true"></i></div> <div id="tool-zoom-in" class="button"><i class="fa fa-search-plus" aria-hidden="true"></i></div> </div> <div class="section special"> <div id="tool-fast-undo" class="button f-backward"><i class="fa fa-fast-backward" aria-hidden="true"></i></div> <div id="tool-undo" class="button undo"><i class="fa fa-backward" aria-hidden="true"></i></div> <div id="tool-redo" class="button redo"><i class="fa fa-forward" aria-hidden="true"></i></div> <div id="tool-fast-redo" class="button f-forward"><i class="fa fa-fast-forward" aria-hidden="true"></i></div> </div> <div class="section special"> <hr> <span id="toolName">Tool name</span> </div> <div id="size" class="section size"> <input class="slider" id="size-slider" type ="range" min ="1" max="20" step ="1" value ="1"/> </div> <div id="colorpaletteSection" class="section colorpicker"> <div id="colorpalette" class="colorpalette"></div> </div> <div id="colorpaletteFillSection" class="section colorpicker"> <div id="colorpaletteFill" class="colorpalette"></div> </div> </div> </div> </div> <div class="col-md-9"> <div id="sketchpad"></div> </div> </div> </div> <!-- http://sketchpad.pro - free online drawing board tool --> <script src="https://cdn.sketchpad.pro/dist/current/sketchpad.min.js"></script> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >/*global window, Sketchpad, WebSocket, Colorpalette, saveFile, loadFile*/ function initSketchpad() { "use strict"; var sketchpadEl = document.getElementById("sketchpad"); var sketchpad = new Sketchpad({ containerEl: sketchpadEl, features: { displayCrosshair: true, displayGrid: true }, createPageConfig: { no: 1, backgroundColor: "rgba(250,250,250,1)" } }); window.sketchpad = sketchpad; var colorpalette = new Colorpalette({ containerEl: document.getElementById("colorpalette") }).on("change", function (e) { sketchpad.getCurrentTool().setColor(e.color.red, e.color.green, e.color.blue, e.color.alpha); }); window.colorpalette = colorpalette; var colorpaletteFill = new Colorpalette({ containerEl: document.getElementById("colorpaletteFill") }).on("change", function (e) { sketchpad.getCurrentTool().setFillColor(e.color.red, e.color.green, e.color.blue, e.color.alpha); }); window.colorpaletteFill = colorpaletteFill; /** * Changes current tool * @param {string} toolId - tool id */ function selectTool(toolId) { console.log("selectTool", toolId); sketchpad.setTool(toolId); document.querySelectorAll(".toolbar .button").forEach(function (el) { el.classList.remove("active"); }); document.getElementById("tool-" + toolId).classList.add("active"); document.getElementById("size").style.display = "none"; document.getElementById("colorpaletteSection").style.display = "none"; document.getElementById("colorpaletteFillSection").style.display = "none"; var tool = sketchpad.getCurrentTool(); document.getElementById("toolName").innerHTML = tool.toolLabel || "Undefined"; /** * set toolbar for tool */ if (typeof tool.getColor === "function") { colorpalette.setColor(tool.getColor(), "noPropagate"); } if (typeof tool.getFillColor === "function") { colorpaletteFill.setColor(tool.getFillColor(), "noPropagate"); } if (typeof tool.getSize === "function") { var size = tool.getSize(); document.getElementById("size-slider").value = size; } switch (toolId) { case "pen": document.getElementById("colorpaletteSection").style.display = "block"; document.getElementById("size").style.display = "block"; break; case "highlighter": document.getElementById("colorpaletteSection").style.display = "block"; document.getElementById("size").style.display = "block"; break; case "eraser": break; case "rectangle": document.getElementById("colorpaletteSection").style.display = "block"; document.getElementById("colorpaletteFillSection").style.display = "block"; document.getElementById("size").style.display = "block"; break; case "circle": document.getElementById("colorpaletteSection").style.display = "block"; document.getElementById("colorpaletteFillSection").style.display = "block"; document.getElementById("size").style.display = "block"; break; case "line": document.getElementById("colorpaletteSection").style.display = "block"; document.getElementById("size").style.display = "block"; break; } } selectTool("pen"); document.getElementById("size-slider").addEventListener("change", function (e) { if (typeof sketchpad.getCurrentTool().setSize === "function") { sketchpad.getCurrentTool().setSize(e.target.value); } }); //save document.getElementById('tool-save').addEventListener("click", function () { var data = sketchpad.saveSketchpad(true); saveFile(JSON.stringify(data), sketchpad.room.room_token + ".json", "text/json"); }); /** * Load sketch from json */ function jsonToDraw(sketchpad, inputList) { var i, input; sketchpad.reset(); sketchpad.receiveMessageFromServer({data: JSON.stringify({cmd: "history-begin"})}); sketchpad.sendMessageToServer({cmd: "history-begin"}); for (i = 0; i < inputList.length; i += 1) {if (window.CP.shouldStopExecution(1)){break;} input = inputList[i]; input.bid = 0; input.uid = sketchpad.UID; if (input.config && input.config.sid) { console.log("PAGE: Input.cmd", input.cmd, input.config, input.config.sid); } else { console.log("Input: Input.cmd", input.cmd, input.sid); } sketchpad.sendMessageToServer(inputList[i]); sketchpad.receiveMessageFromServer({data: JSON.stringify(inputList[i])}); } window.CP.exitedLoop(1); sketchpad.receiveMessageFromServer({data: JSON.stringify({cmd: "history-end"})}); sketchpad.sendMessageToServer({cmd: "history-end"}); //select current page? return inputList; } //load document.getElementById('tool-load').addEventListener("click", function () { loadFile(".json,application/json", function (data) { try { data = JSON.parse(data); } catch (e) { console.error("Error parsing file", e); return; } if (Array.isArray(data)) { return jsonToDraw(sketchpad, data); } else { console.error("Wrong file content"); return; } }); }); //screenshot document.getElementById('tool-screenshot').addEventListener("click", function () { sketchpad.screenshot(function (blob) { saveFile(blob, sketchpad.room.room_token + ".png", "image/png"); }, "image/png", 1); }); //pen document.getElementById('tool-pen').addEventListener("click", function () { selectTool("pen"); }); // marker document.getElementById('tool-highlighter').addEventListener("click", function () { selectTool("highlighter"); }); // mandala document.getElementById('tool-mandala').addEventListener("click", function () { selectTool("mandala"); }); // mandala document.getElementById('tool-type').addEventListener("click", function () { selectTool("type"); }); //eraser document.getElementById('tool-eraser').addEventListener("click", function () { selectTool("eraser"); }); //cutout document.getElementById('tool-cutout').addEventListener("click", function () { selectTool("cutout"); }); document.getElementById('tool-rectangle').addEventListener("click", function () { selectTool("rectangle"); }); document.getElementById('tool-line').addEventListener("click", function () { selectTool("line"); }); document.getElementById('tool-circle').addEventListener("click", function () { selectTool("circle"); }); document.getElementById('tool-rainbow').addEventListener("click", function () { selectTool("rainbow"); }); document.getElementById('tool-move-viewport').addEventListener("click", function () { selectTool("move-viewport"); }); document.getElementById('tool-rotate-viewport').addEventListener("click", function () { selectTool("rotate-viewport"); }); document.getElementById('tool-zoom-in').addEventListener("click", function () { sketchpad.setScale(sketchpad.scale * 2); }); document.getElementById('tool-zoom-1').addEventListener("click", function () { sketchpad.setScale(1); sketchpad.setViewportPosition(0, 0); sketchpad.setRotation(0); }); document.getElementById('tool-zoom-out').addEventListener("click", function () { sketchpad.setScale(sketchpad.scale / 2); }); document.getElementById('reset').addEventListener("click", function () { sketchpad.reset(); }); document.getElementById('tool-undo').addEventListener("click", function () { sketchpad.undo(); }); document.getElementById('tool-redo').addEventListener("click", function () { sketchpad.redo(); }); } initSketchpad(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: