HTML5 Canvas: Setting context on resize

Question

I have a project using HTML5 Canvas (createjs) and I've had issues with spikes on text strokes, meaning I have to set the miterlimit of the 2d context. However, the parent (which I have no control over) scales the canvas when the window is resized, which obviously resets the canvas context.

Now, I want to avoid putting an onresize event inside the client - my first thought is just to use the createjs Ticker thus:

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
    var ctx = canvas.getContext('2d');
    ctx.miterLimit = 2;
}

Though this seems a little wasteful, is there a more efficient way of doing this, without using DOM events?

Answer 1

Your approach might work, but its definitely a hack, since you can't expect that context properties will be maintained, or that they won't be applied in the wrong place.

If you do want to patch the display list to update the context, you can use the "drawstart" event, which fires before the display list is drawn:

stage.on("drawstart", function(e) {
    var ctx = stage.canvas.getContext("2d");
    ctx.miterLimit = 2;
});

However if you want a better approach that is instance-specific, you can extend the Text class to append any context properties you want. Here is a quick example where miterLimit is stored and applied any time the text is drawn. In this example, you can create multiple instances and set different miter limits on them. Note that you might want to also support other properties such as lineJoin.

http://jsfiddle.net/cr4hmgqp/2/

(function() {
    "use strict"
  function MiterText(text, font, color, miterLimit) {
    this.Text_constructor(text,font,color);
    this.miterLimit = miterLimit;
  };
  var p = createjs.extend(MiterText, createjs.Text);
  p.draw = function(ctx, ignoreCache) {
    ctx.miterLimit = this.miterLimit;
    if (this.Text_draw(ctx, ignoreCache)) { return true; }
    return true;
  };
  p.clone = function() {
        return this._cloneProps(new MiterText(this.text, this.font, this.color, this.miterLimit));
    };
  createjs.MiterText = createjs.promote(MiterText, "Text");
}());

Note that this issue should hopefully be fixed in the next version of EaselJS. Here is the tracked issue: https://github.com/CreateJS/EaselJS/issues/781

Cheers.