added bilinear filtering for drawimage

[enkimute]

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• [x ] New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [x ] My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• [x ] All new and existing tests passed.

Description

[joshmarinacci]

This looks good to me. I approve.

[enkimute]

https://en.wikipedia.org/wiki/Texture_filtering#Bilinear_filtering

…

On Mon, Dec 13, 2021 at 1:27 PM Charles Robertson ***@***.***> wrote: Sorry. What is bi-linear filtering? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#72 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABLHMI33VHBL5FCMTX3EGC3UQXRCVANCNFSM4GJ7XPDQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[charlesr1971]

@enkimute Does this help to smooth drawImage() results of a clip.
So for instance I have clipped an image, using an arc(), to create a circular avatar.
But, it is aliased.

Will your fix, effectively create anti-aliasing?

Thank you 🙏

[enkimute]

Hi Charles, This fix only affects how pixels are sampled from the source image. It will not help you create anti-aliased clipping masks. (the easiest approach to get that would be to render your image larger, and then downsample) Regards, Steven.

…

On Mon, Dec 13, 2021 at 3:14 PM Charles Robertson ***@***.***> wrote: @enkimute <https://github.com/enkimute> Does this help to smooth *drawImage()* results of a clip. So for instance I have clipped an image, using an *arc()*, to create a circular avatar. But, it is aliased. Will your fix, effectively create anti-aliasing? Thank you 🙏 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#72 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABLHMI3JAMI6I6O2O4LFX7TUQX5V3ANCNFSM4GJ7XPDQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[charlesr1971]

@enkimute Hi Steven. Thanks for your reply.
Well I have created an image at 1200px X 1200px, but when I scale it down, it looks even more pixellated!

My code is:

const scaleX = 0.5;
const scaleY = 0.5;
 
const width = img.width * scaleX;
const height = img.height * scaleY;
 
const resized = PImage.make(width, height, null);
const ctx = resized.getContext('2d');
 
ctx.drawImage(
img,
0,
0,
img.width,
img.height,
0,
0,
width,
height
);