Kevin Powell - Community•2y 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•2y 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•2y ago

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

glutonium•2y ago

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

13eck•2y ago

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

glutonium•2y ago

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

13eck•2y 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•2y ago

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

WebMechanic•2y ago

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

glutonium•2y ago

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

WebMechanic•2y 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•2y ago

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

Gaming

Programming

getObjectFitSize()