<canvas id="canvas"></canvas>
    <nav class="menu">
      <div class="nav" id="navigation">
        <div class="clr" data-clr="#000"></div>
        <div class="clr" data-clr="#fff"></div>
        <input type="color" value="#000000" id="stiftfarbe" />
        <input
          type="range"
          name="InputName"
          id="ageInputId"
          value="15"
          min="1"
          max="25"
          oninput="OutputId.value = InputId.value"
        /><output id="OutputId">5</output>
        <button class="clear">Clear</button>
        <button class="save">Save</button>
        <input type="color" value="#ffffff" id="selectFarbe" />
      </div>
    </nav>

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
 
.nav {
  width: auto;
  height: 50px;
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-around;
  transition: opacity 500ms;
  background: linear-gradient(to right, #4568dc, #b06ab3);
  padding: 10px;
  border-radius: 10px;
  border: 3px solid #fff;
}
 
.nav div,
button,
input {
  margin: 5px;
}
.nav:hover {
  cursor: pointer;
}
 
.clr {
  height: 35px;
  width: 35px;
  background: blue;
  border-radius: 50%;
  border: 3px solid #fff;
  transition: transform 500ms;
}
 
.clr:hover {
  transform: scale(1.2);
}
 
.clr:nth-child(1) {
  background: #000000;
}
.clr:nth-child(2) {
  background: #ffffff;
}
 
button {
  border: none;
  outline: none;
  padding: 10px;
  border-radius: 3px;
  background-color: #03bb56;
  color: #fff;
  border: 3px solid #fff;
  font-size: 15px;
}
.save {
  background-color: #0f65d4;
}
 
input[type="color"] {
  width: 60px;
  height: 40px;
}
 
#OutputId {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
}
 
#InputId {
  background: linear-gradient(to right, #000428, #004e92);
  height: 7px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  border: 3px solid #fff;
  border-radius: 5px;
  accent-color: #fff;
}
 
.hidden {
  display: none;
}

const canvas = document.getElementById("canvas");
const body = document.querySelector("body");
 
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
 
var newColor = "";
var lineW = 5;
let prevX = null;
let prevY = null;
let draw = false;
let history = [];
 
// hintergrundfarbe
body.style.backgroundColor = "#ffffff";
var selectedFarbe = document.getElementById("selectFarbe");
 
// background anpassen nach auswahl
selectedFarbe.addEventListener(
  "input",
  function () {
    newColor = selectedFarbe.value;
    body.style.backgroundColor = newColor;
  },
  false
);
 
//stiftfarbe
var stiftfarbe = document.getElementById("stiftfarbe");
stiftfarbe.addEventListener("input", function () {
  ctx.strokeStyle = stiftfarbe.value;
  console.log(stiftfarbe.value);
});
 
// linie malen
 
const ctx = canvas.getContext("2d");
ctx.lineWidth = lineW;
 
document.getElementById("InputId").oninput = function () {
  draw = null;
  lineW = document.getElementById("InputId").value;
  document.getElementById("OutputId").innerHTML = lineW;
  ctx.lineWidth = lineW;
  ctx.lineCap = "round";
};
 
let clrs = document.querySelectorAll(".clr");
clrs = Array.from(clrs);
clrs.forEach((clr) => {
  clr.addEventListener("click", () => {
    ctx.strokeStyle = clr.dataset.clr;
    history = [];
  });
});
 
window.addEventListener("mousedown", (e) => (draw = true));
window.addEventListener("mouseup", (e) => (draw = false));
 
window.addEventListener("mousemove", (e) => {
  if (prevX == null || prevY == null || !draw) {
    prevX = e.clientX;
    prevY = e.clientY;
    return;
  }
 
  let currentX = e.clientX;
  let currentY = e.clientY;
 
  ctx.beginPath();
  ctx.moveTo(prevX, prevY);
  ctx.lineTo(currentX, currentY);
  ctx.stroke();
 
  prevX = currentX;
  prevY = currentY;
 
  // save to history
  history.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
});
 
let clearBtn = document.querySelector(".clear");
clearBtn.addEventListener("click", () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});
 
let saveBtn = document.querySelector(".save");
saveBtn.addEventListener("click", () => {
  let data = canvas.toDataURL("imag/png");
  let a = document.createElement("a");
  a.href = data;
  //a.download = "sketch.png";
  a.download = new Date().getTime() + ".png";
  a.click();
});
 
// menu verstecken
document.addEventListener("keydown", function (event) {
  if (event.key === "m") {
    var nav = document.querySelector(".menu");
    nav.classList.toggle("hidden");
  }
  if (event.key === "z") {
    history.pop();
    ctx.putImageData(history[history.length - 1], 0, 0);
    /*
    if (history.length > 0) {
      ctx.putImageData(history[history.length - 1], 0, 0);
    }
    */
  }
});
 
setCanvasSize();
window.addEventListener("resize", setCanvasSize);