canvas-sizing.js

define([
], function(){
  return function(gfxSurfaceW, gfxSurfaceH, canvasW, canvasH, borderThickness, textOffset){
    var surfaceRatio = (gfxSurfaceW * 1.0) / (gfxSurfaceH * 1.0);
    var canvasRatio = (canvasW * 1.0) / (canvasH * 1.0);
    if(canvasRatio > surfaceRatio){
      //stick box to left
      var xRemaining = gfxSurfaceW - (textOffset * 2);
      var pxPerInch = xRemaining / (canvasW + (borderThickness * 2));
      var x = (borderThickness * pxPerInch) + textOffset;
      var y = (gfxSurfaceH / 2 ) - ((canvasH * pxPerInch) / 2);
      return {
        x: x,
        y: y,
        width: pxPerInch * canvasW,
        height: pxPerInch * canvasH,
        pxPerInch: pxPerInch
      };

    }else{
      //stick box to top
      var yRemaining = gfxSurfaceH - (textOffset * 2);
      var pxPerInch = yRemaining / (canvasH + (borderThickness * 2));
      var y = (borderThickness * pxPerInch) + textOffset;
      var x = (gfxSurfaceW / 2 ) - ((canvasW * pxPerInch) / 2);
      return {
        x: x,
        y: y,
        width: pxPerInch * canvasW,
        height: pxPerInch * canvasH,
        pxPerInch: pxPerInch
      };
    }

  }
  

});






  console.log('canvasSizing Portrait', canvasSizing(620,620,8,10,1,20));
  console.log('canvasSizing portait big', canvasSizing(620,620,16,20,1,20));

  console.log('canvasSizing landscape', canvasSizing(620,620,10,8,1,20));
  console.log('canvasSizing landscape big', canvasSizing(620,620,20,16,1,20));