AquaMotion — Editor (patched)

by Sharxxy

HTML

<!-- gif.js worker + lib -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>

<div class="app">
  <div id="toolbar" class="panel">
    <button class="toolBtn" data-tool="pointer" title="Pointer (V)">🖱️</button>
    <button class="toolBtn active" data-tool="pencil" title="Pencil (B)">✏️</button>
    <button class="toolBtn" data-tool="eraser" title="Eraser (E)">🩹</button>
    <button class="toolBtn" data-tool="line" title="Line (L)">➖</button>
    <button class="toolBtn" data-tool="rect" title="Rectangle (R)">⬛</button>
    <button class="toolBtn" data-tool="circle" title="Circle (C)">⭕</button>

    <input type="color" id="colorPicker" value="#000000" title="Color">
    <input type="range" id="brushSize" min="1" max="120" value="4" title="Brush size">

    <label style="font-size:11px;">Brush</label>
    <select id="brushType" title="Brush type" style="width:64px;padding:6px;border-radius:6px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.06)">
      <option value="hard">Hard</option>
      <option value="ink">Ink</option>
      <option value="air">Airbrush</option>
      <option value="charcoal">Charcoal</option>
      <option value="pattern">Pattern</option>
      <option value="shadow">EFX: Shadow</option>
      <option value="glow">EFX: Glow</option>
      <option value="blur">EFX: Blur</option>
    </select>

    <label style="font-size:11px;">Onion</label>
    <input type="checkbox" id="onionToggle" checked>
    <label style="font-size:11px;">Prev / Next</label>

    <label style="font-size:11px;">Grid</label>
    <input type="checkbox" id="gridToggle">
    <input type="range" id="gridSize" min="4" max="80" value="20" style="width:64px">

    <div style="height:6px"></div>
    <button class="toolBtn" id="undo" title="Undo (Ctrl+Z)">↩️</button>
    <button class="toolBtn"...

CSS

:root{--accent:#4fc3f7;--bg:#0b1e3d}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue';background:var(--bg);color:#eaf6ff}
.app{display:flex;height:100vh;gap:12px;padding:12px}
.panel{background:linear-gradient(180deg,#09263a,#061726);padding:10px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#toolbar{width:88px;background:linear-gradient(180deg,#19375a,#12304e);border-right:2px solid var(--accent);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;border-radius:10px}
.toolBtn{width:64px;height:44px;background:rgba(255,255,255,0.04);border-radius:8px;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px}
.toolBtn.active{background:var(--accent);color:#042033;font-weight:600}
#toolbar input[type=color],#toolbar input[type=range]{width:64px;background:transparent;border-radius:6px;border:none}
#toolbar label{font-size:11px;color:rgba(255,255,255,0.85);text-align:center}
.center{flex:1;display:flex;flex-direction:column;min-width:0}
#topBar{height:48px;display:flex;align-items:center;padding:6px 10px;border-bottom:2px solid rgba(127, 199, 240, .06)}
.inlineInput{padding:6px;border-radius:6px;border:none;background:rgba(255,255,255,0.03);color:#fff;width:80px}
#workspace{flex:1;display:flex;min-height:0;gap:12px}
#canvasArea{flex:1;display:flex;justify-content:center;align-items:center;background:var(--panel);overflow:hidden;position:relative;border-radius:10px;padding:12px}
#canvasWrap{position:relative; touch-action:none; border-radius:8px; background:#e9eef6; padding:6px}
canvas{display:block;background:#fff;border-radius:6px; box-shadow:0 6px 18px...

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let drawing = false;
let tool = "brush";
let brushType = "hard";
let color = "#00ffff";
let size = 10;

const patternCanvas = document.createElement("canvas");
patternCanvas.width = 20;
patternCanvas.height = 20;
const pctx = patternCanvas.getContext("2d");
pctx.fillStyle = "#444";
pctx.fillRect(0, 0, 20, 20);
pctx.fillStyle = "#888";
pctx.fillRect(0, 0, 10, 10);
const pattern = ctx.createPattern(patternCanvas, "repeat");

function setBrush(type) {
  brushType = type;
}

function startDraw(e) {
  drawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
  if (!drawing) return;

  ctx.lineWidth = size;
  ctx.lineCap = "round";

  switch (brushType) {
    case "hard":
      ctx.strokeStyle = color;
      ctx.globalAlpha = 1;
      ctx.shadowBlur = 0;
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      break;

    case "airbrush":
      ctx.fillStyle = color;
      for (let i = 0; i < 30; i++) {
        let offsetX = e.offsetX + (Math.random() - 0.5) * size;
        let offsetY = e.offsetY + (Math.random() - 0.5) * size;
        ctx.globalAlpha = 0.1;
        ctx.fillRect(offsetX, offsetY, 1, 1);
      }
      ctx.globalAlpha = 1;
      break;

    case "charcoal":
      ctx.fillStyle = color;
      for (let i = 0; i < 15; i++) {
        let offsetX = e.offsetX + (Math.random() - 0.5) * size * 2;
        let offsetY = e.offsetY + (Math.random() - 0.5) * size * 2;
        ctx.globalAlpha = Math.random() * 0.3;
        ctx.fillRect(offsetX, offsetY, 2, 2);
      }
      ctx.globalAlpha = 1;
      break;

    case "pattern":
      ctx.strokeStyle = pattern;
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      break;

    case "shadow":
      ctx.strokeStyle = color;
      ctx.shadowBlur = 15;
      ctx.shadowColor = color;
     ...