shyiko / canvas-text-opentypejs-shim

Consistent text rendering for <canvas> (backed by opentype.js)
https://www.npmjs.com/package/canvas-text-opentypejs-shim
20 stars 4 forks source link

OpenSans-Regular + IText = incorrect width (when used together with fabric.js) #demo #1

Closed shyiko closed 7 years ago

shyiko commented 7 years ago

    var applyCanvasTextOpenTypeJsShim = window['canvas-text-opentypejs-shim']
    var shimConfig = {
      resolveFont: function (o) {
        if (o.fontFamily === 'Roboto') {
          return font
        }
      }
    }

    fabric.util.createCanvasElement = (function(original) {
      return function () {
        var el = original.apply(null, arguments)
        applyCanvasTextOpenTypeJsShim(el.getContext('2d'), shimConfig)
        return el;
      }
    })(fabric.util.createCanvasElement)

    var canvas = document.createElement('canvas')
    canvas.width = canvas.height = 200
    document.body.appendChild(canvas)

    var ctx = new fabric.Canvas(canvas)
    ;[ctx.contextContainer, ctx.contextCache].forEach(function (ctx) {
      applyCanvasTextOpenTypeJsShim(ctx, shimConfig)
    })

    ctx.add(new fabric.Text('Hello World', {
      left: 0, top: 0, fontFamily: 'Roboto', fontSize: 26
    }))

does the trick. This is obviously too invasive and so a better solution is needed.

shyiko commented 7 years ago

Fixed in b9026f3 by decorating _setTextStyles.