CanvasRenderingContext2D.imageSmoothingEnabled

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 :

<canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="modifier" type="button" value="Modifier" />
  <input id="effacer" type="button" value="Effacer" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
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);
};</textarea>

var canevas = document.getElementById('canevas');
var ctx = canevas.getContext('2d');
var textarea = document.getElementById('code');
var effacer = document.getElementById('effacer');
var modifier = document.getElementById('modifier');
var code = textarea.value;

function dessinerCanevas() {
  ctx.clearRect(0, 0, canevas.width, canevas.height);
  eval(textarea.value);
}

effacer.addEventListener('click', function() {
  textarea.value = code;
  dessinerCanevas();
});

modifier.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', dessinerCanevas);
window.addEventListener('load', dessinerCanevas);

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'interface la définissant, CanvasRenderingContext2D
• image-rendering