updates

src/App.vue

@@ -82,15 +82,16 @@ const savePng = async () => {
     <Page>
       <div id="typeSelector">
         <Button :size="ButtonSize.Small"
-          :active="typeSelector == 'rus' && vRotation == 65 && vMargin == 15 && hMargin == 40 && hMargin2 == 20 && imageWidth == 210 && imageHeight == 297"
+          :active="typeSelector == 'rus' && vRotation == 65 && vMargin == 3 && hMargin == 8 && hMargin2 == 4 && imageWidth == 148 && imageHeight == 210 && marginEnable == true"
           :click="() => {
             typeSelector = 'rus';
             vRotation = 65;
-            vMargin = 15;
+            vMargin = 3;
-            hMargin = 40;
+            hMargin = 8;
-            hMargin2 = 20;
+            hMargin2 = 4;
-            imageWidth = 210;
+            imageWidth = 148;
-            imageHeight = 297;
+            imageHeight = 210;
+            marginEnable = true;
           }">Тетрадь в линию</Button>
         <Button :size="ButtonSize.Small"
           :active="typeSelector == 'rus' && vRotation == 90 && vMargin == 30 && hMargin == 30 && hMargin2 == 30 && imageWidth == 210 && imageHeight == 297"

src/components/Canvas.vue

@@ -93,6 +93,10 @@ const render = () => {
       ctx.value.lineTo(x, imageHeightPx);
       ctx.value.stroke();
     }
+
+    // ctx.value.font = hMargins[1] * 3 * ONE_MM + "px propisi"; // todo хз почему тут x3
+    // ctx.value.fillStyle = "#cccccc";
+    // ctx.value.fillText("Привет мир", 100, (hMargins[0] + hMargins[1]) * ONE_MM);
   }
 };
 
@@ -103,6 +107,12 @@ onMounted(() => {
     ctx.value = canvas.getContext("2d");
   }
 
+  var f = new FontFace('propisi', 'url(/fonts/ttf/propisi.ttf)');
+  f.load().then(function (font) {
+    console.log('font propisi ready');
+    document.fonts.add(font);
+  });
+
   render();
 });