add more stickers

src/App.jsx

@@ -18,6 +18,7 @@ function App() {
     y: characters[character].defaultText.y,
   });
   const [fontSize, setFontSize] = useState(characters[character].defaultText.s);
+  const [spaceSize, setSpaceSize] = useState(1);
   const [rotate, setRotate] = useState(characters[character].defaultText.r);
   const [curve, setCurve] = useState(false);
   const [loaded, setLoaded] = useState(false);
@@ -57,20 +58,26 @@ function App() {
       ctx.textAlign = "center";
       ctx.strokeStyle = "white";
       ctx.fillStyle = characters[character].color;
-
+      var lines = text.split('\n');
       if (curve) {
-        for (let i = 0; i < text.length; i++) {
-          ctx.rotate(angle / text.length / 2.5);
+        for (let line of lines){
+        for (let i = 0; i < line.length; i++) {
+          ctx.rotate(angle / line.length / 2.5);
           ctx.save();
           ctx.translate(0, -1 * fontSize * 3.5);
-          ctx.strokeText(text[i], 0, 0);
-          ctx.fillText(text[i], 0, 0);
+          ctx.strokeText(line[i], 0, 0);
+          ctx.fillText(line[i], 0, 0);
           ctx.restore();
         }
+      }
       } else {
-        ctx.strokeText(text, 0, 0);
-        ctx.fillText(text, 0, 0);
-        ctx.restore();
+    for (var i = 0,k=0; i<lines.length; i++){
+      console.log(spaceSize)
+        ctx.strokeText(lines[i], 0, k);
+        ctx.fillText(lines[i],0, k )
+        k+=spaceSize
+    }
+    ctx.restore();
       }
     }
   };
@@ -169,6 +176,20 @@ function App() {
                 color="secondary"
               />
             </div>
+            <div>
+              <label>
+                <nobr>Spacing: </nobr>
+              </label>
+              <Slider
+                value={spaceSize}
+                onChange={(e, v) => setSpaceSize(v)}
+                min={1}
+                max={100}
+                step={1}
+                track={false}
+                color="secondary"
+              />
+            </div>
             <div>
               <label>Curve (Beta): </label>
               <Switch
@@ -184,6 +205,7 @@ function App() {
               size="small"
               color="secondary"
               value={text}
+              multiline={true}
               fullWidth
               onChange={(e) => setText(e.target.value)}
             />