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;