<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/morkett/pen/MvgWdL?limit=all&page=37&q=draggable" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(41, 41, 41, 0.004);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
body, html {
margin: 0;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
}
body {
min-height: 100vh;
min-width: 100vw;
background: #626262;
font-family: Helvetica;
}
.brushPanel, .imgNav, .sprayPanel {
height: 180px;
width: 266.6px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
background: #535353;
top: 15px;
right: 15px;
position: absolute;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
z-index: 999;
}
.brushPanel, .sprayPanel {
left: 15px;
right: auto;
height: 100px;
width: 266.6px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
img {
width: 250px;
height: 133.33px;
display: block;
border-radius: 5px;
}
#canvasImg {
z-index: 200;
}
#canvasBgImg {
background: #fff;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/canvasBg.png) 50%;
background-size: 15px;
background-position: -1.5px top;
position: absolute;
top: 33.2px;
top: calc(50% + 10px);
left: 50%;
-webkit-transform: translatex(-50%) translatey(-50%);
transform: translatex(-50%) translatey(-50%);
}
#draw {
cursor: crosshair !important;
z-index: 200;
}
#canvasBg {
top: 50%;
left: 50%;
-webkit-transform: translatex(-50%) translatey(-50%);
transform: translatex(-50%) translatey(-50%);
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/canvasBg.png) 50%;
background-size: 50px;
position: absolute;
z-index: -1;
}
.toolbar {
position: absolute;
left: 200px;
top: 200px;
height: auto;
width: 50px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-align: start;
-webkit-box-align: start;
align-items: flex-start;
background: #535353;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 999;
}
.imgNavTitle, .toolbar, .toolTitle {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: flex-start;
}
.imgNavTitle, .toolTitle {
background: #434343;
height: 20px;
width: 100%;
border-radius: inherit;
color: #dcdcdc;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
padding-left: 5px;
font-size: 10px;
}
.toolTitle {
-webkit-transform: translateX(-1px);
transform: translateX(-1px);
width: 52px;
}
.imgNavTitle, .panelTitle, .sprayPaneTitle {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
.panelTitle, .sprayPaneTitle {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
width: calc(100% + 100px);
z-index: 500;
margin-left: 100px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
height: 20px;
}
.sprayPaneTitle {
width: 100%;
margin-left: 0;
}
.tool {
height: 45px;
width: 50px;
border: 1px solid transparent;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
cursor: pointer;
background: #535353;
color: #dcdcdc;
border-radius: 5px;
-webkit-transition: all 0s ease;
transition: all 0s ease;
position: relative;
}
.tool:hover {
border-radius: 5px !important;
background-color: #383838;
border-color: #636363;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.tool:after {
content: attr(data-tool-tip);
width: 10px;
min-height: 20px;
background: #383838;
top: 0;
left: 100%;
margin-left: 10px;
padding: 5px;
position: absolute;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
text-align: center;
font-size: 10px;
font-weight: 700;
-webkit-transform: translateY(25%) translateX(-210%);
transform: translateY(25%) translateX(-210%);
display: -ms-flexbox;
display: -webkit-box;
display: flex;
opacity: 0;
z-index: -1;
border-radius: 5px;
}
.tool:hover:after {
margin-left: 5px;
opacity: 1;
min-width: 150px;
-webkit-transform: translateY(25%) translateX(0);
transform: translateY(25%) translateX(0);
-webkit-transition: width 1.5s linear 0s, opacity .5s linear 1.5s, -webkit-transform 0s linear 1.5s;
transition: width 1.5s linear 0s, opacity .5s linear 1.5s, -webkit-transform 0s linear 1.5s;
transition: transform 0s linear 1.5s, width 1.5s linear 0s, opacity .5s linear 1.5s;
transition: transform 0s linear 1.5s, width 1.5s linear 0s, opacity .5s linear 1.5s, -webkit-transform 0s linear 1.5s;
}
#download, .bg, .brush, .clear, .eraser, .nav, .rainbow, .save, .spray {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/paintBrush.svg);
background-position: 50%;
background-repeat: no-repeat;
}
.eraser {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/eraser.svg);
}
.bg {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/paintBucket.svg);
}
.clear {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/clear.svg);
}
.save {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/save.svg);
}
.rainbow {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/rainbow.svg);
}
.nav {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/nav.svg);
}
.spray {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/spraycan.svg);
}
#download {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/download.svg);
}
a#download, a#download:active, a#download:hover, a#download:visited {
height: 100%;
width: 100%;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
color: #dcdcdc;
text-decoration: none;
}
label {
color: #dcdcdc;
font-size: 11px;
font-weight: 700;
}
.sizeLabel {
margin-top: 5px;
}
input[type=color] {
-webkit-appearance: none;
background: transparent;
border-radius: 5px;
outline: none;
}
input[type=color]::-webkit-color-swatch-wrapper {
padding: 2px 1px;
height: 26px;
width: 26px;
}
input[type=color]::-webkit-color-swatch {
border: none;
border-radius: 5px;
border: 2px solid #383838;
}
input[type=range] {
width: 200px;
}
.brushSizePreview {
width: 10px;
height: 10px;
border-radius: 50%;
background: #e53935;
display: block;
}
.brushSizePreviewCont {
position: absolute;
top: 0;
right: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
background: inherit;
width: 100px;
height: 100%;
bottom: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
padding-top: 10px;
}
.active {
background-color: #383838;
border-color: #636363;
}
.hide {
display: none;
}
.cross {
cursor: pointer;
background: none;
}
.drag {
cursor: move;
}
.preview {
height: 10px;
width: 10px;
display: block;
position: absolute;
top: 0;
left: 0;
background: red;
z-index: 999;
border-radius: 10px;
cursor: crosshair;
}
</style></head><body>
<body ondragover="dragOver(event)" ondrop="drop(event)">
<canvas id="draw" width="800" height="450"></canvas>
<canvas id="canvasBg" width="800" height="450"></canvas>
<div class="imgNav drag" draggable="true" ondragstart="dragStart(event)" id="imgNav">
<div class="imgNavTitle"><span class="cross" id="imgNavCross">✕</span></div>
<img id="canvasImg" draggable="false" />
<img id="canvasBgImg" draggable="false" />
</div>
<div class="brushPanel hide" id="brushPanel">
<div class="toolTitle panelTitle"><span class="cross" id="panelCross">✕</span></div>
<label for="brushSize" class="sizeLabel"> Size</label>
<div class="brushSizePreviewCont">
<label for="brushSize" class="brushSizePreview"></label>
</div>
<input type="range" class="brushSize" id="brushSize" value="10" min="1" max="80">
<label for="brushOpacity">Opacity</label>
<input type="range" class="brushOpacity" value="1" min="0.1" max="1" step=".1" id="brushOpacity">
</div>
<div class="sprayPanel hide" id="sprayPanel">
<div class="toolTitle sprayPaneTitle"><span class="cross" id="sprayPanelCross">✕</span></div>
<label for="sprayDensity" class="sizeLabel"> Density</label>
<input type="range" class="sprayDensity" id="sprayDensity" value="50" min="5" max="300">
<label for="sprayRadius">Radius</label>
<input type="range" class="sprayRadius" value="20" min="20" max="80" step="1" id="sprayRadius">
</div>
<div class="toolbar drag" id="drag-tool" draggable="true" ondragstart="dragStart(event)">
<div class="toolTitle">✕</div>
<div class="tool brush" data-tool-tip="Brush Size & Opacity"></div>
<div class="tool rainbow" data-tool-tip="Rainbow Brush Tool"></div>
<div class="tool spray" data-tool-tip="Spray Can Tool"></div>
<div class="tool bg" data-tool-tip="Change Background Colour"></div>
<div class="tool eraser" id="eraserTool" data-tool-tip="Eraser Tool"></div>
<div class="tool nav active" data-tool-tip="Navigator Hide/Show"></div>
<div class="tool save" data-tool-tip="Save Canvas"></div>
<div class="tool clear" data-tool-tip="Clear Canvas"></div>
<div class="tool dl" data-tool-tip="Download As PNG">
<a id="download"></a>
</div>
<input type="color" class="tool colorSelector" value="#e53935" data-tool-tip="Select Colour">
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >"use strict";
function loadCanvas() {
var e = localStorage.getItem("canvas"),
a = new Image();
(a.src = e), (a.onload = function() {
ctx.drawImage(a, 0, 0);
}), (document.getElementById("canvasImg").src = e || error);
}
function loadCanvasBg() {
var e = localStorage.getItem("canvasBg"),
a = new Image();
(a.src = e), (a.onload = function() {
ctxBg.drawImage(a, 0, 0);
}), (document.getElementById("canvasBgImg").src = e || error);
}
function draw(e) {
if (!isDrawing) return changeBrushSize(), void changeBrushOpacity();
if (canSpray)
for (var a = density; a--; ) {if (window.CP.shouldStopExecution(1)){break;}
(ctx.strokeStyle = "transparent"), (ctx.fillStyle = colorPicker.value);
var t = getRandomInt(-radius, radius),
s = getRandomInt(-radius, radius);
ctx.fillRect(lastX + t, lastY + s, 1, 1);
}
window.CP.exitedLoop(1);
(ctx.lineWidth = brushSize.value), ctx.beginPath(), ctx.moveTo(
lastX,
lastY
), ctx.lineTo(e.offsetX, e.offsetY), ctx.stroke();
var r = [e.offsetX, e.offsetY];
if (
(
(lastX = r[0]),
(lastY = r[1]),
changeBrushSize(),
changeBrushOpacity(),
!0 === changeHue
)
)
(ctx.strokeStyle =
"hsla(" + hue + ", 100%, 50%, " + brushOpacity.value + ")"), ++hue >=
360 && (hue = 0);
else {
var o = colorPicker.value.replace("#", ""),
n = rgbToHsl(o);
ctx.strokeStyle =
"hsla(" +
n[0] +
"," +
n[1] +
"%," +
n[2] +
"%," +
brushOpacity.value +
")";
}
var c = canvas.toDataURL("image/png"),
l = canvasBg.toDataURL("image/png");
(document.getElementById("canvasImg").src = c), (document.getElementById(
"canvasBgImg"
).src = l);
}
function activeTool(e, a) {
a ? e.classList.add("active") : e.classList.remove("active");
}
function erase() {
(canErase = !canErase), activeTool(eraser, canErase), canErase
? (
(canSpray = !1),
activeTool(sprayTool, canSpray),
sprayPanel.classList.add("hide"),
brushPanel.classList.remove("hide"),
(ctx.globalCompositeOperation = "destination-out")
)
: (ctx.globalCompositeOperation = "source-over");
}
function rain() {
(canRain = !canRain), activeTool(rainbow, canRain), canRain
? ((canSpray = !1), activeTool(sprayTool, canSpray), (changeHue = !0))
: (changeHue = !1);
}
function showBrush() {
(showBrushPanel = !showBrushPanel), activeTool(
brushTool,
showBrushPanel
), activeTool(panelCross, showBrushPanel), showBrushPanel
? (
(canSpray = !1),
activeTool(sprayTool, canSpray),
sprayPanel.classList.add("hide"),
brushPanel.classList.remove("hide")
)
: brushPanel.classList.add("hide");
}
function showNav() {
(showNavPanel = !showNavPanel), activeTool(
navTool,
showNavPanel
), showNavPanel
? navPanel.classList.remove("hide")
: navPanel.classList.add("hide");
}
function selectColor() {
(canRain = !1), activeTool(rainbow, canRain), (changeHue = !1);
}
function changeBrushSize() {
(brushSizePreview.style.width =
brushSize.value + "px"), (brushSizePreview.style.height =
brushSize.value + "px");
var e = colorPicker.value.replace("#", ""),
a = rgbToHsl(e);
(ctx.strokeStyle =
"hsla(" +
a[0] +
"," +
a[1] +
"%," +
a[2] +
"%," +
brushOpacity.value +
")"), (brushSizePreview.style.background = ctx.strokeStyle);
}
function changeBrushOpacity() {
var e = colorPicker.value.replace("#", ""),
a = rgbToHsl(e);
(ctx.strokeStyle =
"hsla(" +
a[0] +
"," +
a[1] +
"%," +
a[2] +
"%," +
brushOpacity.value +
")"), changeBrushSize();
}
function bgToolOn() {
if ((isBgTool = !isBgTool)) {
bgTool.classList.add("active"), ctxBg.rect(
0,
0,
canvas.width,
canvas.height
), (ctxBg.fillStyle = colorPicker.value), ctxBg.fill();
var e = canvasBg.toDataURL("image/png");
(document.getElementById("canvasBgImg").src = e), setTimeout(function() {
bgTool.classList.remove("active");
}, 250);
}
}
function sprayOn() {
(canSpray = !canSpray), activeTool(sprayTool, canSpray), canSpray
? (
(showBrushPanel = !1),
brushPanel.classList.add("hide"),
activeTool(brushTool, showBrushPanel),
sprayPanel.classList.remove("hide")
)
: sprayPanel.classList.add("hide");
}
function changeSpray() {
(radius = sprayRadius.value), (density = sprayDensity.value);
}
function clearCanvas() {
(isClearTool = !isClearTool), isClearTool &&
(
clearTool.classList.add("active"),
setTimeout(function() {
clearTool.classList.remove("active");
}, 250)
), ctx.clearRect(0, 0, canvas.width, canvas.height), ctxBg.clearRect(
0,
0,
canvas.width,
canvas.height
);
var e = canvas.toDataURL("image/png"),
a = canvasBg.toDataURL("image/png");
(document.getElementById("canvasImg").src = e), (document.getElementById(
"canvasBgImg"
).src = a);
}
function saveCanvas() {
localStorage.setItem("canvas", canvas.toDataURL()), localStorage.setItem(
"canvasBg",
canvasBg.toDataURL()
), (isSaveTool = !isSaveTool) &&
(
saveTool.classList.add("active"),
setTimeout(function() {
saveTool.classList.remove("active");
}, 250)
);
}
function downloadCanvas(e, a, t) {
(e.href = document.getElementById(a).toDataURL()), (e.download = t);
}
function rgbToHsl(e) {
var a = parseInt(e, 16),
t = (a >> 16) & 255,
s = (a >> 8) & 255,
r = 255 & a;
(t /= 255), (s /= 255), (r /= 255);
var o = Math.max(t, s, r),
n = Math.min(t, s, r),
c = void 0,
l = void 0,
i = (o + n) / 2;
if (o === n) c = l = 0;
else {
var u = o - n;
switch (((l = i > 0.5 ? u / (2 - o - n) : u / (o + n)), o)) {
case t:
c = (s - r) / u + (s < r ? 6 : 0);
break;
case s:
c = (r - t) / u + 2;
break;
case r:
c = (t - s) / u + 4;
}
c /= 6;
}
return [Math.floor(360 * c), Math.floor(100 * l), Math.floor(100 * i)];
}
function getRandomInt(e, a) {
return Math.floor(Math.random() * (a - e + 1)) + e;
}
function dragStart(e) {
var a = window.getComputedStyle(e.target, null),
t =
parseInt(a.getPropertyValue("left")) -
e.clientX +
"," +
(parseInt(a.getPropertyValue("top")) - e.clientY) +
"," +
e.target.id;
e.dataTransfer.setData("Text", t);
}
function drop(e) {
var a = e.dataTransfer.getData("Text").split(","),
t = document.getElementById(a[2]);
return (t.style.left = e.clientX + parseInt(a[0], 10) + "px"), (t.style.top =
e.clientY + parseInt(a[1], 10) + "px"), e.preventDefault(), !1;
}
function dragOver(e) {
return e.preventDefault(), !1;
}
var canvas = document.querySelector("#draw"),
canvasBg = document.querySelector("#canvasBg"),
ctx = canvas.getContext("2d"),
ctxBg = canvasBg.getContext("2d"),
colorPicker = document.querySelector(".colorSelector"),
brushSize = document.querySelector(".brushSize"),
brushSizePreview = document.querySelector(".brushSizePreview"),
brushOpacity = document.querySelector(".brushOpacity"),
brushTool = document.querySelector(".brush"),
brushPanel = document.querySelector(".brushPanel"),
navPanel = document.querySelector(".imgNav"),
panelCross = document.querySelector("#panelCross"),
navCross = document.querySelector("#imgNavCross"),
sprayCross = document.querySelector("#sprayPanelCross"),
bgTool = document.querySelector(".bg"),
navTool = document.querySelector(".nav"),
clearTool = document.querySelector(".clear"),
saveTool = document.querySelector(".save"),
sprayTool = document.querySelector(".spray"),
sprayDensity = document.querySelector(".sprayDensity"),
sprayRadius = document.querySelector(".sprayRadius"),
sprayPanel = document.querySelector(".sprayPanel"),
dlToolLink = document.querySelector("#download"),
error = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/390561/error.png";
loadCanvasBg(), loadCanvas(), (canvas.width = 800), (canvas.height = 450), (ctx.strokeStyle =
"#BADA55"), (ctx.lineJoin = "round"), (ctx.lineCap =
"round"), (ctx.lineWidth = brushSize.value);
var isBgTool = !1,
isDrawing = !1,
lastX = 0,
lastY = 0,
hue = 0,
changeHue = !1,
density = sprayDensity.value,
radius = sprayRadius.value;
canvas.addEventListener("mousedown", function(e) {
isDrawing = !0;
var a = [e.offsetX, e.offsetY];
(lastX = a[0]), (lastY = a[1]);
}), canvas.addEventListener("mousemove", draw), canvas.addEventListener(
"mousedown",
draw
), canvas.addEventListener("mouseup", function() {
return (isDrawing = !1);
}), canvas.addEventListener("mouseout", function() {
return (isDrawing = !1);
});
var eraser = document.querySelector(".eraser");
eraser.addEventListener("click", erase);
var canErase = !1,
rainbow = document.querySelector(".rainbow"),
canRain = !1;
rainbow.addEventListener("click", rain);
var showBrushPanel = !1;
brushTool.addEventListener("click", showBrush), panelCross.addEventListener(
"click",
showBrush
), navCross.addEventListener("click", showNav), navTool.addEventListener(
"click",
showNav
);
var showNavPanel = !0;
colorPicker.addEventListener(
"click",
selectColor
), colorPicker.addEventListener(
"mousemove",
selectColor
), brushSize.addEventListener(
"mousemove",
changeBrushSize
), brushSize.addEventListener(
"click",
changeBrushSize
), brushOpacity.addEventListener(
"mousemove",
changeBrushOpacity
), brushOpacity.addEventListener(
"click",
changeBrushOpacity
), bgTool.addEventListener("click", bgToolOn), sprayTool.addEventListener(
"click",
sprayOn
), sprayCross.addEventListener("click", sprayOn);
var canSpray = !1;
sprayRadius.addEventListener(
"mousemove",
changeSpray
), sprayRadius.addEventListener(
"click",
changeSpray
), sprayDensity.addEventListener(
"mousemove",
changeSpray
), sprayDensity.addEventListener("click", changeSpray);
var isClearTool = !1;
clearTool.addEventListener("click", clearCanvas);
var isSaveTool = !1;
saveTool.addEventListener("click", saveCanvas);
var isDlTool = !1,
dlTool = document.querySelector(".dl");
dlToolLink.addEventListener(
"click",
function() {
(isDlTool = !isDlTool), isDlTool &&
(
dlTool.classList.add("active"),
setTimeout(function() {
dlTool.classList.remove("active");
}, 250)
), downloadCanvas(this, "draw", "test.png");
},
!1
);
//# sourceURL=pen.js
</script>
</body></html>
