Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété CanvasRenderingContext2D.imageSmoothingEnabled de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (true, par défaut) ou non (false). Lors de la récupération de la propriété imageSmoothingEnabled, la dernière valeur à laquelle elle a été définie est renvoyée.

Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canevas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à false dans ce cas. Voir aussi la propriété CSS image-rendering.

Syntaxe

ctx.imageSmoothingEnabled = valeur;

Options

valeur
Un Boolean indiquant de lisser les images ou non.

Exemples

Utilisation de la propriété imageSmoothingEnabled

Ceci est juste un simple fragment de code utilisant la propriété imageSmoothingEnabled sur une image mise à l'échelle.

HTML

<canvas id="canevas"></canvas>

JavaScript

var canevas = document.getElementById('canevas');
var ctx = canevas.getContext('2d');

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
 ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
 ctx.imageSmoothingEnabled = false;
 ctx.drawImage(img, 0, 0, 400, 200);
};

Modifiez le code ci-dessous et voyez vos changements mis à jour en direct dans le canevas :

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'CanvasRenderingContext2D.imageSmoothingEnabled' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 30
Support complet 30
Aucun support ? — 30
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : webkit
Edge Support complet 15Firefox Support complet 51
Support complet 51
Aucun support ? — 51
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
IE Support complet OuiOpera ? Safari ? WebView Android Support complet 4.4Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 51
Support complet 51
Aucun support ? — 51
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : moz
Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, NemoNobobyPersonne
Dernière mise à jour par : SphinxKnight,