From 4d70b4730885602db05803eae2d948dbd520e866 Mon Sep 17 00:00:00 2001
From: sadorowo <97941280+sadorowo@users.noreply.github.com>
Date: Fri, 20 Oct 2023 09:32:10 +0200
Subject: [PATCH] add: base files
---
index.html | 29 ++++++++++++++++++++++++++++
script.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 34 +++++++++++++++++++++++++++++++++
3 files changed, 119 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2940da2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ Strona z ciekawym wykorzystaniem JS
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8ffb456
--- /dev/null
+++ b/script.js
@@ -0,0 +1,56 @@
+document.addEventListener('contextmenu', event => event.preventDefault());
+document.addEventListener('mousedown', startPainting);
+document.addEventListener('mouseup', stopPainting);
+document.addEventListener('mousemove', draw);
+window.addEventListener('resize', resize);
+
+const colorSelector = document.getElementById('color');
+const weightSlider = document.getElementById('weight');
+const clearButton = document.getElementById('clear');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let color = 'green';
+let weight = 5;
+
+clearButton.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))
+weightSlider.addEventListener('change', e => weight = e.target.value)
+colorSelector.addEventListener('change', e => color = e.target.value)
+resize();
+
+function resize() {
+ ctx.canvas.width = window.innerWidth;
+ ctx.canvas.height = window.innerHeight;
+}
+
+let lastPos = { x: 0, y: 0 };
+let paint = false;
+
+function getPosition(event) {
+ lastPos.x = event.clientX - canvas.offsetLeft;
+ lastPos.y = event.clientY - canvas.offsetTop;
+}
+
+function startPainting(event) {
+ paint = true;
+ getPosition(event);
+}
+
+function stopPainting() {
+ paint = false;
+}
+
+function draw(event) {
+ if (!paint) return;
+
+ ctx.beginPath();
+ ctx.lineWidth = weight;
+ ctx.lineCap = 'round';
+
+ ctx.strokeStyle = color;
+ ctx.moveTo(lastPos.x, lastPos.y);
+ getPosition(event);
+
+ ctx.lineTo(lastPos.x, lastPos.y);
+ ctx.stroke();
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e2bf560
--- /dev/null
+++ b/style.css
@@ -0,0 +1,34 @@
+body {
+ margin: 0;
+ overflow: hidden;
+}
+
+#canvas {
+ width: 100%;
+ height: 100%;
+}
+
+#menu {
+ background-color: #fff;
+ position: absolute;
+ margin: 10px;
+}
+
+button {
+ border: none;
+ color: #fff;
+ background-color: #2f3136;
+ padding: 5px;
+ border-radius: 5px;
+ transition: ease-in-out .2s;
+}
+
+button:hover {
+ background-color: #646466;
+}
+
+select {
+ border: 2px solid #000;
+ padding: 5px;
+ border-radius: 5px;
+}
\ No newline at end of file