Circular Image without stretching?

[Wondermarin]

I get an image (250x150) from the server and try to add it using the addCircularImage() method, but the image is stretched, are there any ways to avoid this?

Expectation:

Reality:

Pay attention to the team logo (B8).

Thanks in advance.

[Wondermarin]

Is there any news?

[Wondermarin]

I see a major update has been released, and this error (if you can call it that) has been fixed?

[kyranet]

Sorry, my plan was to fix this issue with the rewrite to TypeScript, but I forgot to include the patch. I'll work on this right away and release 4.0.1 as soon as it's fixed.

[kyranet]

I believe I resolved this bug with 169398b, you can check if the error is solved by running any of the following commands:

• npm

  $ npm i kyranet/canvas-constructor#build

• yarn

  $ yarn add kyranet/canvas-constructor#build

If it does, I will publish 4.0.1.

[Wondermarin]

Unfortunately I won't be able to check, after the last update it is impossible to compile typescript.

[kyranet]

If you're using TypeScript, you need to update typescript to 3.8.0 or newer, which has been out for 6 months. Check 3.8's changelog here.

[Wondermarin]

Yes, it did get fixed, but I expected an effect similar to "object-fit: cover" from css. Perhaps I made a mistake somewhere and this effect can be achieved?

[Wondermarin]

And about TypeScript, there was no mention of backward compatibility issues with versions before 3.8 in the changelog.

[kyranet]

Yes, it did get fixed, but I expected an effect similar to "object-fit: cover" from css. Perhaps I made a mistake somewhere and this effect can be achieved?

Oh, that'll require extra maths and an options object in CC, I'll try to think the maths under cover.

Most likely the new API will be

interface PrintCircularOptions {
    fit?: 'fill' | 'contain' | 'cover';
}

Where the default would be fill (standard and previous behaviour, also less compute expensive).

My patch would have been arguably semver-major under some eyes as I changed the behaviour of something (although also semver-patch as the method shouldn't try to draw like this).

And about TypeScript, there was no mention of backward compatibility issues with versions before 3.8 in the changelog.

To be honest, TypeScript's semver-minor is semver-major, it almost always contains breaking changes, and none of the features are backwards compatible.

[Wondermarin]

Oh, that'll require extra maths and an options object in CC, I'll try to think the maths under cover.

Most likely the new API will be

interface PrintCircularOptions {
  fit?: 'fill' | 'contain' | 'cover';
}

Yes, it looks great.

[kyranet]

This has been resolved in 05fa376, the build branch has been updated in case you want to try it out, I will release 4.1.0 tomorrow.

I tested the new changes using the following code: https://github.com/kyranet/canvas-constructor/blob/05fa376940edbe2e8ea86c908ec51f3a60df51ff/tests/index.html#L106-L117

Which results on the following:

[Wondermarin]

Yes, it works, good job!

[kyranet]

Just released 4.1.0! https://www.npmjs.com/package/canvas-constructor