((
  $Document,
  _str_createElement,
  _str_addEventListener,
  _str_preventDefault,
  _str_input,
  _str_drawTools,
  _str_strokeStyle,
  _str_color,
  _str_range,
  _str_opacity,
  _str_lineWidth,
  _str_change,
  _str_click,
  _str_value,
  _str_classList,
  _context,
  $canvas,
  $toolbar,
  $picker,
  $alpha,
  $thickness,
  $show,
  StrokeStyle,
  LineWidth,
  ResetValuesFromCanvas,
  ShowToolbar
) => {
  $canvas = $Document.querySelector('[name^="web"] + canvas:has(+ a)');
  $toolbar = $Document[_str_createElement]("div");
  $picker = $Document[_str_createElement](_str_input);
  $alpha = $Document[_str_createElement](_str_input);
  $thickness = $Document[_str_createElement](_str_input);
  $show = $Document[_str_createElement]('a');
  _context = $canvas.getContext("2d");

  $toolbar.id = _str_drawTools;
  $toolbar.style.display = "none";

  $show.style.display = 'block';
  $show.href = '#';
  $show.textContent = _str_drawTools;

  $picker[_str_classList].add(`${_str_drawTools}__${_str_strokeStyle}-${_str_color}`);
  $picker.type = _str_color;

  $alpha[_str_classList].add(
    `${_str_drawTools}__${_str_strokeStyle}-${_str_opacity}`
  );
  $alpha.type = _str_range;
  $alpha.title = _str_opacity;
  $alpha.style.maxWidth = "100px";
  $alpha.min = 0;
  $alpha.max = 255;

  $thickness[_str_classList].add(`${_str_drawTools}__${_str_lineWidth}`);
  $thickness.type = _str_range;
  $thickness.title = _str_lineWidth;
  $thickness.style.maxWidth = "100px";
  $thickness.min = 0;
  $thickness.max = 15;

  $canvas.before($toolbar, $show);
  $toolbar.append($picker);
  $picker.after($alpha, $thickness);

  StrokeStyle = () =>
    (_context[_str_strokeStyle] =
      $picker[_str_value] +
      parseInt($alpha[_str_value]).toString(16).padStart(2, "0"));

  LineWidth = () => (_context[_str_lineWidth] = $thickness[_str_value]);

  ResetValuesFromCanvas = (e) => {
    e && e[_str_preventDefault]();
    $picker[_str_value] = _context[_str_strokeStyle];
    $alpha[_str_value] = 255;
    $thickness[_str_value] = _context[_str_lineWidth];
  };

  ShowToolbar = (e) => {
    e[_str_preventDefault]();
    $toolbar.style.display = "flex";
    $show.remove();
}

  $alpha[_str_addEventListener](_str_change, StrokeStyle);
  $picker[_str_addEventListener](_str_change, StrokeStyle);
  $thickness[_str_addEventListener](_str_change, LineWidth);
  $canvas.nextSibling[_str_addEventListener](_str_click, ResetValuesFromCanvas);
  $show[_str_addEventListener](_str_click, ShowToolbar);
  ResetValuesFromCanvas();
})(
  document,
  "createElement",
  "addEventListener",
  "preventDefault",
  "input",
  "draw-tools",
  "strokeStyle",
  "color",
  "range",
  "opacity",
  "lineWidth",
  "change",
  "click",
  "value",
  "classList"
);

const canvas = document.querySelector('[name^="web"] + canvas:has(+ a)');
const toolbar = document.createElement("div");
const picker = document.createElement("input");
const alpha = document.createElement("input");
const thickness = document.createElement("input");
const show = document.createElement('a');

const context = canvas.getContext("2d");

toolbar.id = "draw-tools";
toolbar.style.display = "none";

show.style.display = 'block'
show.href = '#';
show.textContent = 'tools';

picker.classList.add('draw-tools__strokeStyle-color');
picker.type = "color";
picker.title = "stroke color";

alpha.classList.add('draw-tools__strokeStyle-opacity');
alpha.type = "range";
alpha.title = "stroke opacity";
alpha.style.maxWidth = "100px";
alpha.min = 0;
alpha.max = 255;

thickness.classList.add('draw-tools__lineWidth');
thickness.type = "range";
thickness.title = "stroke opacity";
thickness.style.maxWidth = "100px";
thickness.min = 0;
thickness.max = 15;

canvas.before(toolbar, show);
toolbar.append(picker);
picker.after(alpha, thickness);

const strokeStyle = () =>
  (context.strokeStyle =
    picker.value +
    parseInt(alpha.value).toString(16).padStart(2, "0").toUpperCase());

const lineWidth = () => context.lineWidth = thickness.value;

const resetValuesFromCanvas = (e) => {
    e && e.preventDefault();
    picker.value = context.strokeStyle;
    alpha.value = 255;
    thickness.value = context.lineWidth;
};

const showToolbar = (e) => {
    e.preventDefault();
    toolbar.style.display = "flex";
    show.remove();
}

alpha.addEventListener("change", strokeStyle);
picker.addEventListener("change", strokeStyle);
thickness.addEventListener("change", lineWidth);
canvas.nextSibling.addEventListener('click', resetValuesFromCanvas);
show.addEventListener('click', showToolbar);
resetValuesFromCanvas();

((e,t,a,l,n,d,i,s,r,o,p,y,c,m,x,$,h,v,_,f,g,u,S,b,k,W)=>{h=e.querySelector('[name^="web"] + canvas:has(+ a)'),v=e[t]("div"),_=e[t](n),f=e[t](n),g=e[t](n),u=e[t]("a"),$=h.getContext("2d"),v.id=d,v.style.display="none",u.style.display="block",u.href="#",u.textContent=d,_[x].add(`${d}__${i}-${s}`),_.type=s,f[x].add(`${d}__${i}-${o}`),f.type=r,f.title=o,f.style.maxWidth="100px",f.min=0,f.max=255,g[x].add(`${d}__${p}`),g.type=r,g.title=p,g.style.maxWidth="100px",g.min=0,g.max=15,h.before(v,u),v.append(_),_.after(f,g),S=()=>$[i]=_[m]+parseInt(f[m]).toString(16).padStart(2,"0"),b=()=>$[p]=g[m],k=e=>{e&&e[l](),_[m]=$[i],f[m]=255,g[m]=$[p]},W=e=>{e[l](),v.style.display="flex",u.remove()},f[a](y,S),_[a](y,S),g[a](y,b),h.nextSibling[a](c,k),u[a](c,W),k()})(document,"createElement","addEventListener","preventDefault","input","draw-tools","strokeStyle","color","range","opacity","lineWidth","change","click","value","classList");