size uses offsetWidth and offsetHeight

[greggman]

If I do

<canvas style="border: 50px solid red"></canvas>

will report an offsetWidth of 400px even though the canvas content is really only 300px across.

Similarly

<canvas style="width: 100%; box-sizing: border-box; border: 50px solid red;"></canvas>

offsetWidth will be 100px too large.

Are you sure you don't want clientWidth and clientHeight instead of offsetWidth and offsetHeight?

[unconed]

You're partially right, but clientWidth is also incorrect, it still includes the padding.

Either way, the autosizing doesn't take canvas padding/border styles into account, it measures the parent element and sizes the canvas to fit inside that.

So while I can change this in the code, the real fix would probably require computed styles or one of the bounding box methods.

Here's the test for size.spec.js that would check this behavior, it fails with both offsetWidth or clientWidth:

  it("ignores border and padding", function () {

    var element = document.createElement('div');
    // 300x200
    element.style.width  = "300px";
    element.style.height = "200px";
    // 50px combined border/padding
    element.style.border  = "20px solid black";
    element.style.padding = "30px";
    element.style.boxSizing = "border-box";
    document.body.appendChild(element);

    var options = {
      init: false,
      element: element,
      plugins: ['bind', 'renderer', 'size'],
    };

    var three = new THREE.Bootstrap(options);

    three.on('resize', function (event) {
      expect(three.Size.viewWidth).toBe(200);
      expect(three.Size.viewHeight).toBe(100);
    });

    three.init();

    three.destroy();

    document.body.removeChild(element);
  });