This method is helpful for calculating size and position of one element to fill another element. A behavior is the same as css property 'background-size: cover;'

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 1

Just add file or function to your project

<script src="https://unpkg.com/@agilie/canvas-image-cover-position"></script>

or

$ npm install @agilie/canvas-image-cover-position

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

Problems? Check the Issues block to find the solution or create an new issue that we will fix asap. Feel free to contribute.

This method is open-sourced by Agilie Team [email protected]

Agilie Team

If you have any questions, suggestions or just need a help with web or mobile development, please email us at [email protected]. You can ask us anything from basic to complex questions.

We will continue publishing new open-source projects. Stay with us, more updates will follow!

The MIT License (MIT) Copyright © 2019 Agilie Team