Kevin Powell - Community•15mo ago

getObjectFitSize()

here the person talking about the getObjectFitSize() but i did not find anything about in on the internet.. any idea what it is???

11 Replies

glutonium•15mo ago

link of the page https://medium.com/@doomgoober/understanding-html-canvas-scaling-and-sizing-c04925d9a830

Medium

Understanding HTML Canvas Scaling and Sizing

Does your HTML Canvas look terrible? Here’s how to fix it.

13eck•15mo ago

You highlighted the answer in your initial pic: "From NPM intrinsic-scale". https://www.npmjs.com/package/intrinsic-scale

glutonium•15mo ago

i read it..but didn't quite understand.. can u briefly say what it is

13eck•15mo ago

It's a Node.js module that adds certain functionality the author thought that the canvas API was missing

glutonium•15mo ago

hmm..okee.. so I guess I need to know about node.js and api for this anyways..tnx ❤️

13eck•15mo ago

Huh, searching through the repo there is no getObjectFitSize() function so I have no idea where they're getting it from Oh, derp. They wrote it in the CodePen :p

function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) {
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) {
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
  } else {
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  }

  return {
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  };
}

function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) {
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) {
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
  } else {
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  }

  return {
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  };
}

They used the NPM module as inspiration for it

glutonium•15mo ago

well then where will I grt an explanation for getObjectFitSize()

WebMechanic•15mo ago

@ʙᴏᴏʙ 2.0 you have the medium article explaining the background and the actual code. What else are you looking for?

glutonium•15mo ago

;-; I didn't understand that's why I asked if I could get a detailed info anywhere

WebMechanic•15mo ago

there's a readme file and more example code in the repository https://github.com/fregante/intrinsic-scale All these sources explain what the code is for, the problem it solves, and how to use it. You need to be more specific than "I don't understand" like what exactly it is you don't grasp after reading all these resources?

GitHub

GitHub - fregante/intrinsic-scale: Replicate `background-size: cove...

Replicate background-size: cover/contain for canvas/CSS/Node/… on any type of media. - GitHub - fregante/intrinsic-scale: Replicate background-size: cover/contain for canvas/CSS/Node/… on any t...

glutonium•15mo ago

oke I'll take a look into that.. Appreciate you help.. much love ❤️

Gaming

Programming

getObjectFitSize()