support fontStyle, close #12

mapbox · Sep 22, 2021 · ec24f5d · ec24f5d
1 parent 5880649
commit ec24f5d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -59,9 +59,10 @@ <h1><a href="https://github.com/mapbox/tiny-sdf">TinySDF</a> demo</h1>
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     const fontSize = +document.getElementById('fontsize').value;
     const fontWeight = +document.getElementById('fontweight').value;
+    const fontStyle = 'normal';
     const buffer = Math.ceil(fontSize / 8);
     const radius = Math.ceil(fontSize / 3);
-    const sdf = new TinySDF({fontSize, buffer, radius, fontWeight});
+    const sdf = new TinySDF({fontSize, buffer, radius, fontWeight, fontStyle});
     const size = fontSize + buffer * 2;
 
     const now = performance.now();

diff --git a/index.js b/index.js
@@ -7,7 +7,8 @@ export default class TinySDF {
         radius = 8,
         cutoff = 0.25,
         fontFamily = 'sans-serif',
-        fontWeight = 'normal'
+        fontWeight = 'normal',
+        fontStyle = 'normal'
     }) {
         this.buffer = buffer;
         this.cutoff = cutoff;
@@ -19,7 +20,7 @@ export default class TinySDF {
 
         const canvas = this._createCanvas(size);
         const ctx = this.ctx = canvas.getContext('2d', {willReadFrequently: true});
-        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
 
         ctx.textBaseline = 'alphabetic';
         ctx.textAlign = 'left'; // Necessary so that RTL text doesn't have different alignment