レンダリングの順番を変更

index.html

@@ -229,6 +229,10 @@
                     </div>
                 </div>
                 <div class="col-lg-4" id="controller">
+                    <h5><u>All images are processed on your browser. No data are sent to any servers.</u></h5>
+                    <div class="input-group">
+                        <button id="render" type="button" class="btn btn-success">Render</button>
+                    </div>
                     <h6>Image Settings</h6>
                     <div class="input-group">
                         <label for="upload">
@@ -243,16 +247,8 @@
                         <label for="faceRemove">
                             <button id="faceRemoveButton" type="button" class="btn btn-danger">Remove Icon</button>
                         </label>
-                        <div class="vr"></div>
-                        <button id="render" type="button" class="btn btn-success">Render</button>
                     </div>
-                    <p><u>All images are processed on your browser. No data are sent to any servers.</u></p>
                     <h6>Message Window</h6>
-                    <div class="input-group">
-                        <span class="input-group-text">WindowSize</span>
-                        <input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
-                            step="1" min="16" max="30">
-                    </div>
                     <div class="input-group">
                         <span class="input-group-text">TopColor</span>
                         <input name="topColor" type="color" class="form-control form-control-color" id="topColor"
@@ -281,7 +277,7 @@
                     <div class="input-group">
                         <span class="input-group-text">font-size</span>
                         <input name="fontSizeInput" type="range" class="form-control form-range" id="fontSizeInput"
-                            value="0.8" step="0.01" min="0.5" max="1">
+                            value="0.8" step="0.01" min="0.25" max="1">
                     </div>
                     <div class="input-group">
                         <button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
@@ -293,6 +289,11 @@
                             class="btn btn-primary opacity-50">Fake-UI</button>
                     </div>
                     <h6>Advanced</h6>
+                    <div class="input-group">
+                        <span class="input-group-text">WindowSize</span>
+                        <input name="windowSize" type="range" class="form-control form-range" id="windowSize" value="25"
+                            step="1" min="16" max="30">
+                    </div>
                     <div class="input-group">
                         <span class="input-group-text">Render Scale</span>
                         <input name="renderScale" type="range" class="form-control form-range" id="renderScale"
@@ -366,7 +367,7 @@
             let width = window.document.documentElement.clientHeight * naturalAspect
             let height = window.document.documentElement.clientHeight;
             result.classList.remove("d-none");
-
+            result.textContent = "";
             createEditor();
             setTimeout(function () {
                 html2canvas(document.getElementById("edit"), {
@@ -390,7 +391,6 @@
                         return x;
                     }
                 }).then(canvas => {
-                    result.textContent = "";
                     let i = document.createElement("img");
                     i.setAttribute("src", canvas.toDataURL('image/png'));
                     result.appendChild(i);
@@ -522,7 +522,7 @@
             }
         });
         document.querySelectorAll("#userInterface > div").forEach(el => {
-            el.addEventListener("click", function(){
+            el.addEventListener("click", function () {
                 document.getElementById("render").click();
             });
         });