Merge pull request Flipboard#65 from Flipboard/cying-font-pixels-fix

Fix for canvas font using points instead of pixels

Author: Michael Johnston

examples/css-layout/app.js

@@ -74,7 +74,7 @@ var App = React.createClass({
   getTitleStyle: function () {
     return {
       fontFace: FontFace('Georgia'),
-      fontSize: 18,
+      fontSize: 22,
       lineHeight: 28,
       height: 28,
       marginBottom: 10,
@@ -86,7 +86,7 @@ var App = React.createClass({
   getExcerptStyle: function () {
     return {
       fontFace: FontFace('Georgia'),
-      fontSize: 12,
+      fontSize: 17,
       lineHeight: 25,
       marginTop: 15,
       flex: 1,

examples/timeline/components/Page.js

@@ -91,7 +91,7 @@ var Page = React.createClass({
       top: this.getImageHeight() + CONTENT_INSET,
       left: CONTENT_INSET,
       width: this.props.width - 2 * CONTENT_INSET,
-      fontSize: 20,
+      fontSize: 22,
       lineHeight: 30,
       fontFace: FontFace('Avenir Next Condensed, Helvetica, sans-serif', null, {weight: 500})
     };
@@ -102,7 +102,7 @@ var Page = React.createClass({
       left: CONTENT_INSET,
       width: this.props.width - 2 * CONTENT_INSET,
       fontFace: FontFace('Georgia, serif'),
-      fontSize: 12,
+      fontSize: 15,
       lineHeight: 23
     };
   },

lib/CanvasUtils.js

@@ -136,7 +136,7 @@ function drawText (ctx, text, x, y, width, height, fontFace, options) {
   }
 
   ctx.fillStyle = options.color;
-  ctx.font = fontFace.attributes.style + ' normal ' + fontFace.attributes.weight + ' ' + options.fontSize + 'pt ' + fontFace.family;
+  ctx.font = fontFace.attributes.style + ' ' + fontFace.attributes.weight + ' ' + options.fontSize + 'px ' + fontFace.family;
 
   textMetrics.lines.forEach(function (line, index) {
     currText = line.text;

lib/measureText.js

@@ -50,7 +50,7 @@ module.exports = function measureText (text, width, fontFace, fontSize, lineHeig
   var tryLine;
   var currentLine;
 
-  ctx.font = fontFace.attributes.style + ' normal ' + fontFace.attributes.weight + ' ' + fontSize + 'pt ' + fontFace.family;
+  ctx.font = fontFace.attributes.style + ' ' + fontFace.attributes.weight + ' ' + fontSize + 'px ' + fontFace.family;
   textMetrics = ctx.measureText(text);
 
   measuredSize.width = textMetrics.width;