simplify text rendering

GramyPomagamy · Jun 23, 2024 · 5c1324e · 5c1324e
1 parent 7dbd027
commit 5c1324e
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 34 deletions.
diff --git a/src/utils/renderText.ts b/src/utils/renderText.ts
@@ -0,0 +1,10 @@
+export function renderShadowText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  maxWidth?: number
+) {
+  ctx.strokeText(text, x, y, maxWidth)
+  ctx.fillText(text, x, y, maxWidth)
+}
diff --git a/src/views/PhotoView.vue b/src/views/PhotoView.vue
@@ -7,6 +7,7 @@ import RunnerItem from '../components/RunnerItem.vue'
 import { useRoute } from 'vue-router'
 
 import { loadImage } from '../utils/loadImage'
+import { renderShadowText } from '@/utils/renderText'
 
 const route = useRoute()
 const canvasWidth = ref(1500)
@@ -113,8 +114,7 @@ function redrawThumbnail() {
   // runner 83medium
   let runnerPosition = 208 + 101
   ctx.font = 'normal normal 600 101px Saira Condensed'
-  ctx.strokeText(runner.value, canvasWidth.value / 2, runnerPosition, canvasWidth.value)
-  ctx.fillText(runner.value, canvasWidth.value / 2, runnerPosition, canvasWidth.value)
+  renderShadowText(ctx, runner.value, canvasWidth.value / 2, runnerPosition, canvasWidth.value)
 
   // fdbc16
   let titleFontSize = 340
@@ -147,41 +147,37 @@ function redrawThumbnail() {
   //var titlePosition = 100
 
   // ctx.font = 'normal normal 600 113px Barlow Condensed'
-  ctx.strokeText(title.value + ' ', titlePosition, titleHeight, canvasWidth.value)
-  ctx.fillText(title.value + ' ', titlePosition, titleHeight, canvasWidth.value)
+  renderShadowText(ctx, title.value + ' ', titlePosition, titleHeight, canvasWidth.value)
 
   if (subtitle.value) {
     // // podtytuł 90 semi-bld
     // ctx.font = 'normal normal 600 90px Barlow Condensed'
     ctx.fillStyle = '#ffbd16'
 
-    ctx.strokeText(subtitle.value, subtitlePosition, titleHeight, canvasWidth.value)
-    ctx.fillText(subtitle.value, subtitlePosition, titleHeight, canvasWidth.value)
+    renderShadowText(ctx, subtitle.value, subtitlePosition, titleHeight, canvasWidth.value)
   }
 
   // kategoria 42 light
   ctx.lineWidth = 5
+  ctx.fillStyle = 'white'
   ctx.font = 'normal normal 300 42px Barlow Condensed'
-  ctx.strokeText(category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
-  ctx.fillText(category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
+  renderShadowText(ctx, category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
 
   if (money.value > 0) {
     // we collected 24 bold
     let weCollected = 'zebraliśmy już'
     ctx.lineWidth = 5
     ctx.font = 'normal normal 600 24px Saira Condensed'
     ctx.fillStyle = 'white'
-    ctx.strokeText(weCollected, 203, 185 + 24 + 5, canvasWidth.value)
-    ctx.fillText(weCollected, 203, 185 + 24 + 5, canvasWidth.value)
+    renderShadowText(ctx, weCollected, 203, 185 + 24 + 5, canvasWidth.value)
 
     let moneyText = money.value.toLocaleString('pl-PL') + ' PLN'
     // money 42 ultra bold
     ctx.lineWidth = 5
     ctx.font = 'normal normal 800 77px Saira Condensed'
     ctx.textAlign = 'center'
     ctx.fillStyle = '#ffbd16'
-    ctx.strokeText(moneyText, 160 + 43, 200 + 77 + 10, canvasWidth.value)
-    ctx.fillText(moneyText, 160 + 43, 200 + 77 + 10, canvasWidth.value)
+    renderShadowText(ctx, moneyText, 160 + 43, 200 + 77 + 10, canvasWidth.value)
   }
 }
 

diff --git a/src/views/RunnerView.vue b/src/views/RunnerView.vue
@@ -7,6 +7,7 @@ import RunnerItem from '../components/RunnerItem.vue'
 import { useRoute } from 'vue-router'
 
 import { loadImage } from '../utils/loadImage'
+import { renderShadowText } from '@/utils/renderText'
 
 const route = useRoute()
 const canvasWidth = ref(1500)
@@ -112,8 +113,7 @@ function redrawThumbnail() {
   ctx.textAlign = 'center'
   let jzc = 'Już za chwilę...'
   // 1500 - ((1500 - 912) / 2)
-  ctx.strokeText(jzc, 1206, 99, canvasWidth.value - 912)
-  ctx.fillText(jzc, 1206, 99, canvasWidth.value - 912)
+  renderShadowText(ctx, jzc, 1206, 99, canvasWidth.value - 912)
 
   var runnerPosition = 648 + 83
   var titlePosition = 740 + 113
@@ -124,35 +124,30 @@ function redrawThumbnail() {
 
   // runner 83medium
   ctx.font = 'normal normal 500 83px Barlow Condensed'
-  ctx.strokeText(runner.value, canvasWidth.value / 2, runnerPosition, canvasWidth.value)
-  ctx.fillText(runner.value, canvasWidth.value / 2, runnerPosition, canvasWidth.value)
+  renderShadowText(ctx, runner.value, canvasWidth.value / 2, runnerPosition, canvasWidth.value)
 
   // title, 113 semi-bold
   ctx.font = 'normal normal 600 113px Barlow Condensed'
-  ctx.strokeText(title.value, canvasWidth.value / 2, titlePosition, canvasWidth.value)
-  ctx.fillText(title.value, canvasWidth.value / 2, titlePosition, canvasWidth.value)
+  renderShadowText(ctx, title.value, canvasWidth.value / 2, titlePosition, canvasWidth.value)
 
   if (subtitle.value) {
     // podtytuł 90 semi-bld
     ctx.font = 'normal normal 600 90px Barlow Condensed'
 
-    ctx.strokeText(subtitle.value, canvasWidth.value / 2, 786 + 90, canvasWidth.value)
-    ctx.fillText(subtitle.value, canvasWidth.value / 2, 786 + 90, canvasWidth.value)
+    renderShadowText(ctx, subtitle.value, canvasWidth.value / 2, 786 + 90, canvasWidth.value)
   }
 
   // kategoria 42 light
   ctx.lineWidth = 5
   ctx.font = 'normal normal 300 42px Barlow Condensed'
-  ctx.strokeText(category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
-  ctx.fillText(category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
+  renderShadowText(ctx, category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
 
   if (money.value > 0) {
     // we collected 24 bold
     let weCollected = 'zebraliśmy już'
     ctx.lineWidth = 5
     ctx.font = 'normal normal 600 24px Saira Condensed'
-    ctx.strokeText(weCollected, 175, 170, canvasWidth.value)
-    ctx.fillText(weCollected, 175, 170, canvasWidth.value)
+    renderShadowText(ctx, weCollected, 175, 170, canvasWidth.value)
 
     let moneyText = money.value.toLocaleString('pl-PL') + ' PLN'
     // money 42 ultra bold

diff --git a/src/views/YoutubeView.vue b/src/views/YoutubeView.vue
@@ -7,6 +7,7 @@ import RunnerItem from '../components/RunnerItem.vue'
 import { useRoute } from 'vue-router'
 
 import { loadImage } from '../utils/loadImage'
+import { renderShadowText } from '@/utils/renderText'
 
 const route = useRoute()
 const canvasWidth = ref(1280)
@@ -113,26 +114,22 @@ function redrawThumbnail() {
 
   // runner 83 PT Sans Narrow Bold Condensed
   ctx.font = 'normal normal 700 70px PT Sans Narrow'
-  ctx.strokeText(runner.value, rightSide, runnerPosition + 70, canvasWidth.value)
-  ctx.fillText(runner.value, rightSide, runnerPosition + 70, canvasWidth.value)
+  renderShadowText(ctx, runner.value, rightSide, runnerPosition + 70, canvasWidth.value)
 
   // title,  PT Sans Narrow Bold Condensed
   ctx.font = 'normal normal 700 ' + titleSize.toString() + 'px PT Sans Narrow'
-  ctx.strokeText(title.value, rightSide, titlePosition + titleSize, canvasWidth.value)
-  ctx.fillText(title.value, rightSide, titlePosition + titleSize, canvasWidth.value)
+  renderShadowText(ctx, title.value, rightSide, titlePosition + titleSize, canvasWidth.value)
 
   if (subtitle.value) {
     // podtytuł 77 PT Sans Narrow Bold Condensed
     ctx.font = 'normal normal 700 77px PT Sans Narrow'
 
-    ctx.strokeText(subtitle.value, rightSide, subtitlePosition + 77, canvasWidth.value)
-    ctx.fillText(subtitle.value, rightSide, subtitlePosition + 77, canvasWidth.value)
+    renderShadowText(ctx, subtitle.value, rightSide, subtitlePosition + 77, canvasWidth.value)
   }
 
   // kategoria 62 Saira Condensed, Semi-Bold Condensed
   ctx.font = 'normal normal 600 62px Saira Condensed'
-  ctx.strokeText(category.value, rightSide, categoryPosition + 62, canvasWidth.value)
-  ctx.fillText(category.value, rightSide, categoryPosition + 62, canvasWidth.value)
+  renderShadowText(ctx, category.value, rightSide, categoryPosition + 62, canvasWidth.value)
 
   // time 158 Saira Condensed, Ultra-Bold Condensed
   ctx.font = 'normal normal 800 158px Saira Condensed'

diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -10,6 +10,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "strict": true
   }
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -16,6 +16,7 @@
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "types": ["node"],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "strict": true
   }
 }