Canvas resize with Flexbox and Enyo

Question

I am having a problem with resizing the coordinate system of a canvas when using Flexbox and Enyo. See the example at: http://jsfiddle.net/g7MLS/1989/

When you first run it, everything is fine. Shrink the width of the box and the line of text stays 1 line until the canvas gets to min-width, then the text starts to wrap.

To see the problem, uncomment the lines:

c.width = b.width;
c.height = b.height;

Flexbox appears to now be using the internal coordinate width to arrange things...or something. The text will now start wrapping before the canvas shrinks to min-width.

I can't duplicate the exact setup without Enyo, but this is close and doesn't seem to do the same thing: https://jsfiddle.net/ez6b2q8v/103/

The way I understand it, setting the canvas width/height should only affect the internal coordinates, not the size of the canvas itself. What am I missing?

var ready = require('enyo/ready'),
  kind = require('enyo/kind'),
  Toolbar = require('onyx/Toolbar'),
  Application = require('enyo/Application'),
  Button = require('enyo/Button');


ready(function() {
  var MySample = kind({
    name: "MySample",
    rendered: function() {
      this.inherited(arguments);
      c = this.$.myCanvas.hasNode();
      b = this.$.myCanvas.getBounds()
      //c.width = b.width;
      //c.height = b.height;
      console.log(c.width);
    },
    buttonTapped: function(inSender, inEvent) {
      this.render();
      return true;
    },

    components: [{
      classes: "main",
      components: [{
        classes: "content",
        components: [{
          classes: "canvas",
          tag: "canvas",
          name: "myCanvas"
        }, {
          classes: "label",
          content: "This text should be on 1 line, but wrap when canvas == min-width"
        }]
      }, {
        kind: Button,
        ontap: "buttonTapped",
        content: "Render",
      }]
    }],

  });

  app = new Application({
    view: MySample
  });
});

.main {
  position: relative;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background: red;
}

.content {
  order: 0;
  display: flex;
  background: yellow;
  flex: 1 1 auto;
}

.canvas {
  padding: 4px;
  margin: auto;
  min-width: 100px;
  flex: 1 1 auto;
  height: 40px;
  background: blue;
  box-sizing: border-box;
}

.label{
  flex: 0 1 auto;
}

Answer 1

In the absence of CSS dimensions, the height and width of the canvas will also be used as the dimensions. If you specify CSS dimension that are different that the properties, the canvas will be distorted to fix the specified size. See Canvas width and height in HTML5.

If you want the canvas internal coordinates to be adjusted with the flex layout, you'll have to handle resizes as you demonstrated in your fiddle. In Enyo, you can add a handleResize method to MySample to update the canvas' properties.

kind({
  name: "MySample",
  rendered: function () {
    this.inherited(arguments);
    this.setupCanvas();
  },
  handleResize: function () {
    this.inherited(arguments);
    this.setupCanvas();
  },
  setupCanvas: function() {
    var c = this.$.myCanvas.hasNode();
    var b = this.$.myCanvas.getBounds()
    c.width = b.width;
    c.height = b.height;
  },
  buttonTapped: function(inSender, inEvent) {
    this.render();
    return true;
  },

  components: [{
    classes: "main",
    components: [{
      classes: "content",
      components: [{
        classes: "canvas",
        tag: "canvas",
        name: "myCanvas"
      }, {
        classes: "label",
        content: "This text should be on 1 line, but wrap when canvas == min-width"
      }]
    }, {
      kind: Button,
      ontap: "buttonTapped",
      content: "Render",
    }]
  }],

});