It's method which calculate and return size object for fill one element by another like background-size cover
npm install @agilie/canvas-image-cover-position
!Preview
!Preview
``typescript
interface CoverSize = {
width: number;
height: number;
offsetLeft: number;
offsetTop: number;
}
type getCoverSize = (
contentWidth: number,
contentHeight: number,
containerWidth: number,
containerHeight: number,
offsetLeft: number = 0.5,
offsetTop: number = 0.5) => CoverSize
`
Offsets values are in range between 0 an 1Installation
Just add file or function to your project
`html`
or
`bash`
$ npm install @agilie/canvas-image-cover-positionHow to use
javascript
import getCoverSize from '@agilie/canvas-image-cover-position'
var imageCoverSize = getCoverSize(
image.naturalWidth,
image.naturalHeight,
canvas.width,
canvas.height,
0.5,
0.5
);
canvas.getContext('2d').drawImage(
image,
imageCoverSize.offsetLeft,
imageCoverSize.offsetTop,
imageCoverSize.width,
imageCoverSize.height
);
``
demo
We will continue publishing new open-source projects. Stay with us, more updates will follow!