html5 scale image avec antialiasing

Bonjour,
Y’a t’il une méthode simple pour afficher une image redimentionné avec antialiasing ?

var imageObj = new Image();

imageObj.onload = function() {
context.drawImage(imageObj, 10, 10, imageObj.width/3.5, imageObj.height/3.5);
};
imageObj.src = ‘une_grille_par_exemple.png’;

Ca affiche une image non antialiasé.
context.scale() donne le même résultat tout moche.

Le browser sait pourtant bien afficher en direct l’image antialiasé en html via la balise img en changeant les attibuts width et height.

Une idée de comment faire en canvas ?

Hello, je n’ai pas testé mais ça a l’air de répondre à ton besoin :

context.imageSmoothingEnabled = true;

Image smoothing

context.imageSmoothingEnabled [ = value ]
Returns whether pattern fills and the drawImage() method will attempt to smooth images if their pixels don’t line up exactly with the display, when scaling images up.

Can be set, to change whether images are smoothed (true) or not (false).

The imageSmoothingEnabled attribute, on getting, must return the last value it was set to. On setting, it must be set to the new value. When the CanvasRenderingContext2D object is created, the attribute must be set to true.

https://html.spec.whatwg.org/multipage/scripting.html#image-smoothing

Human Coders - Le centre de formation recommandé par les développeur·se·s pour les développeur·se·s