content update

3 files changed, 162 insertions, 0 deletions

diff --git a/tools/draw/app.css b/tools/draw/app.css
new file mode 100644
index 0000000..40e4838
--- /dev/null
+++ b/tools/draw/app.css
@@ -0,0 +1,58 @@
+@charset "utf-8";
+
+* {
+        box-sizing: border-box;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        list-style-type: none;
+        outline: none;
+        text-decoration: none;
+        position: relative;
+        box-shadow: none;
+        -moz-osx-font-smoothing: grayscale !important;
+        text-rendering: optimizeLegibility !important;
+        -webkit-font-smoothing: antialiased !important;
+        font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+        margin: 0;
+        padding: 0;
+        font-size: 13px;
+}
+
+section {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent);
+        background-size: 50px 50px;
+}
+
+canvas {
+        width: 100%;
+        height: 100%;
+}
+
+nav {
+        position: fixed;
+        left: 10px;
+        top: 10px;
+        width: 100px;
+}
+
+nav button {
+        border: 2px dashed #bbb;
+        background: #fff;
+        border-radius: 5px;
+        display: block;
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 10px 5px;
+        font-weight: bold;
+        cursor: pointer;
+}
diff --git a/tools/draw/app.js b/tools/draw/app.js
new file mode 100644
index 0000000..d8b6ebf
--- /dev/null
+++ b/tools/draw/app.js
@@ -0,0 +1,66 @@
+let paintStyle = getComputedStyle(document.querySelector('section'));
+let canvas = document.querySelector('canvas');
+let ctx = canvas.getContext('2d');
+
+canvas.width = parseInt(paintStyle.getPropertyValue('width'));
+canvas.height = parseInt(paintStyle.getPropertyValue('height'));
+
+var mouse = {
+        x: 0,
+        y: 0
+};
+
+ctx.lineWidth = 3;
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.strokeStyle = 'limegreen';
+
+canvas.addEventListener('mousemove', function(e) {
+        mouse.x = e.pageX - this.offsetLeft;
+        mouse.y = e.pageY - this.offsetTop;
+}, false);
+
+canvas.addEventListener('mousedown', function(e) {
+        ctx.beginPath();
+        ctx.moveTo(mouse.x, mouse.y);
+        canvas.addEventListener('mousemove', onPaint, false);
+}, false);
+
+canvas.addEventListener('mouseup', function() {
+        canvas.removeEventListener('mousemove', onPaint, false);
+}, false);
+
+var onPaint = function() {
+        ctx.lineCap = 'round';
+        ctx.lineTo(mouse.x, mouse.y);
+        ctx.stroke();
+};
+
+
+document.querySelectorAll('nav button').forEach(function(button, idx) {
+        button.addEventListener('click', function(evt) {
+                console.log(button.dataset.method);
+
+                switch (button.dataset.method) {
+                        case 'color':
+                                {
+                                        ctx.strokeStyle = button.dataset.value;
+                                        break;
+                                }
+                        case 'size':
+                                {
+                                        ctx.lineWidth = parseInt(button.dataset.value);
+                                        break;
+                                }
+                        case 'clear':
+                                {
+                                        let clear = confirm('Do you really want to clear canvas?');
+                                        if (clear) {
+                                                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                                        }
+                                        break;
+                                }
+                }
+        });
+
+});
diff --git a/tools/draw/index.html b/tools/draw/index.html
new file mode 100644
index 0000000..12bead7
--- /dev/null
+++ b/tools/draw/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+        <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <meta http-equiv="X-UA-Compatible" content="ie=edge">
+                <title>Draw</title>
+                <link rel="stylesheet" href="app.css">
+        </head>
+
+        <body>
+
+                <section>
+                        <canvas></canvas>
+                </section>
+
+                <nav>
+                        <button data-method="color" data-value="limegreen">limegreen</button>
+                        <button data-method="color" data-value="crimson">crimson</button>
+                        <button data-method="color" data-value="purple">purple</button>
+                        <button data-method="color" data-value="fuchsia">fuchsia</button>
+                        <button data-method="color" data-value="blueviolet">blueviolet</button>
+                        <button data-method="color" data-value="goldenrod">goldenrod</button>
+                        <button data-method="color" data-value="royalblue">royalblue</button>
+                        <br>
+                        <button data-method="size" data-value="2">small</button>
+                        <button data-method="size" data-value="4">normal</button>
+                        <button data-method="size" data-value="10">big</button>
+                        <br>
+                        <button data-method="clear" data-value="">clear</button>
+                </nav>
+
+                <script src="app.js" defer></script>
+
+        </body>
+
+</html>