Merge pull request #22 from treapster/master

Replace Anton font + small improvements

src/assets/fonts/Pressuru/LICENSE.txt

@@ -0,0 +1,2 @@
+You are totally free to use the typeface any way you like.
+

src/js/create-text-box.js

@@ -57,12 +57,17 @@ export const createTextBox = (index, data = {}) => {
       </div>
 
       <div class="row g-2">
-        <div class="col-4 mb-3">
-          <label for="shadowWidthInput_${index}" class="mb-1 d-block text-truncate">Shadow width:</label>
-          <input class="form-control" type="number" min="0" max="10" value="${data.shadowBlur}" data-input="shadowBlur" id="shadowWidthInput_${index}">
+        <div class="col mb-3">
+          <label for="shadowWidthInput_${index}" class="mb-1 d-block text-truncate">Shadow size:</label>
+          <input class="form-control" type="number" min="0" max="100" value="${data.shadowBlur}" data-input="shadowBlur" id="shadowWidthInput_${index}">
         </div>
 
-        <div class="col-4 mb-3">
+        <div class="col mb-3">
+          <label class="mb-1 d-block text-truncate" for="TextBorderSizeInput_${index}">Border width:</label>
+          <input class="form-control" type="number" min="0" max="100" value="${data.borderSize}" data-input="borderSize" id="TextBorderWidthInput_${index}">
+        </div>
+
+        <div class="col mb-3">
           <label for="textAlign_${index}" class="mb-1 d-block text-truncate">Text align:</label>
           <select class="form-select" data-input="textAlign" id="textAlignInput_${index}">
             <option value="left">Left</option>
@@ -71,10 +76,11 @@ export const createTextBox = (index, data = {}) => {
           </select>
         </div>
 
-        <div class="col-4 mb-3">
+        <div class="col mb-3">
           <label class="mb-1 d-block text-truncate" for="textRotateInput_${index}">Rotate:</label>
           <input class="form-control" type="number" value="${data.rotate}" data-input="rotate" id="textRotateInput_${index}" min="-360" max="360">
         </div>
+
       </div>
 
       <div class="row g-2">

src/js/custom-fonts.js

@@ -1,4 +1,4 @@
-import AntonRegular from 'url:../assets/fonts/Anton/Anton-Regular.ttf';
+import Pressuru from 'url:../assets/fonts/Pressuru/Pressuru.ttf';
 import OswaldRegular from 'url:../assets/fonts/Oswald/Oswald-Regular.ttf';
 import OswaldBold from 'url:../assets/fonts/Oswald/Oswald-Bold.ttf';
 import RobotoRegular from 'url:../assets/fonts/Roboto/Roboto-Regular.ttf';
@@ -11,7 +11,7 @@ import OpenSansRegular from 'url:../assets/fonts/OpenSans/OpenSans-Regular.ttf';
 import OpenSansBold from 'url:../assets/fonts/OpenSans/OpenSans-Bold.ttf';
 
 export const customFonts = [
-  { name: 'Anton', label: 'Anton', path: AntonRegular, style: 'normal', weight: '400' },
+  { name: 'Pressuru', label: 'Pressuru', path: Pressuru, style: 'normal', weight: '400' },
   { name: 'Oswald-Regular', label: 'Oswald', path: OswaldRegular, style: 'normal', weight: '400' },
   { name: 'Oswald-Bold', label: 'Oswald Bold', path: OswaldBold, style: 'normal', weight: '700' },
   { name: 'Roboto-Regular', label: 'Roboto', path: RobotoRegular, style: 'normal', weight: '400' },

src/js/draw-canvas.js

@@ -13,7 +13,12 @@ export const drawCanvas = (image, canvas, ctx, textOptions = []) => {
   }
 
   textOptions.forEach(function (item, index) {
+    ctx.save();
+
     ctx.font = `${item.fontWeight} ${item.fontSize}px ${item.font}`;
+    ctx.fillStyle = item.fillColor;
+    ctx.textAlign = item.textAlign;
+    ctx.strokeStyle = item.shadowColor;
 
     const multiplier = index + 1;
     const lineHeight = ctx.measureText('M').width + item.fontSize / 2;
@@ -22,27 +27,24 @@ export const drawCanvas = (image, canvas, ctx, textOptions = []) => {
     const text = item.allCaps === true ? item.text.toUpperCase() : item.text;
     const textLines = text.split('\n');
 
-    ctx.fillStyle = item.fillColor;
-    ctx.textAlign = item.textAlign;
-    ctx.save();
-
     if (shadowBlur !== 0) {
       ctx.shadowOffsetX = 0;
       ctx.shadowOffsetY = 0;
       ctx.shadowBlur = shadowBlur;
       ctx.shadowColor = item.shadowColor;
     }
 
-    if (item.rotate) {
-      ctx.translate(xPos + item.offsetX, lineHeight * multiplier + item.offsetY);
-      ctx.rotate(item.rotate * Math.PI / 180);
-      textLines.forEach((text, index) => ctx.fillText(text, 0, index * lineHeight));
-      ctx.rotate(-(item.rotate * Math.PI / 180));
-      ctx.translate(-(xPos + item.offsetX), -(lineHeight * multiplier + item.offsetY));
-    } else {
-      textLines.forEach((text, index) => {
-        ctx.fillText(text, xPos + item.offsetX, index * lineHeight + lineHeight * multiplier + item.offsetY);
-      });
+    ctx.translate(xPos + item.offsetX, lineHeight * multiplier + item.offsetY);
+    ctx.rotate(item.rotate * Math.PI / 180);
+    // first draw each line with shadow
+    textLines.forEach((text, index) => ctx.fillText(text, 0, index * lineHeight));
+    // since shadows of multiline text may be drawn over letters of neighbour lines
+    // (when shadow blur is big enough), re-draw text without shadows.
+    ctx.shadowBlur = 0;
+    textLines.forEach((text, index) => ctx.fillText(text, 0, index * lineHeight));
+    if (item.borderSize > 0) {
+      ctx.lineWidth = item.borderSize;
+      textLines.forEach((text, index) => ctx.strokeText(text, 0, index * lineHeight));
     }
 
     ctx.restore();

src/js/index.js

@@ -43,11 +43,12 @@ const defaultTextOptions = {
   text: '',
   fillColor: '#ffffff',
   shadowColor: '#000000',
-  font: 'Anton',
+  font: 'Pressuru',
   fontSize: 40,
   fontWeight: 'normal',
   textAlign: 'center',
   shadowBlur: 3,
+  borderSize: 1,
   offsetY: 0,
   offsetX: 0,
   rotate: 0,
@@ -89,8 +90,8 @@ const generateMeme = async () => {
 };
 
 const onImageLoaded = evt => {
-  const MAX_WIDTH = 800;
-  const MAX_HEIGHT = 600;
+  const MAX_WIDTH = 4000;
+  const MAX_HEIGHT = 3000;
   let width = evt.target.width;
   let height = evt.target.height;
 
@@ -290,6 +291,8 @@ const handleInputsContainerInput = evt => {
     prop = 'offsetX';
   } else if (element.matches('[data-input="rotate"]')) {
     prop = 'rotate';
+  } else if (element.matches('[data-input="borderSize"]')) {
+    prop = 'borderSize';
   }
 
   if (prop) {