msImageSmoothingEnabled property

Choose bilinear or nearest-neighbor image smoothing when images are resized.

This property is read/write.

HTML Canvas 2D Context level 2IE11



context.msImageSmoothingEnabled = false;

Property values

Type: bool


Use bilinear scaling.


Use nearest-neighbor scaling.


Standards information


The default for this property is true, or use bilinear scaling. When a small image is scaled to a larger size, bilinear scaling creates a soft looking image. The following illustrations are scaled up versions of a 24x24 pixel device. The original image isn't anti-aliased and you can still see the difference when you enlarge it.

Screen shot of small image enlarged using bilinear scaling.

Set msImageSmoothingEnabled to false to force images to use nearest-neighbor scaling. The result is a pixilated but clearer looking image.

Screen shot of paint palette enlarged using nearest neighbor scaling.

This property impacts drawing images and patterns on the following APIs.


The following example initially displays an enlarged image using the default (or true) setting. Click the button to toggle between true and false to see the effect of image smoothing on the image. Try the example.

<!DOCTYPE html> <html>
  <title>canvasImageTest </title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
  <canvas id="MyCanvas" width="225" height="225"> </canvas>
    <button onclick="draw()">Change smoothing </button>    
  <script type="text/javascript">        
    var smooth = true;

    function draw() {
      var image = document.createElement("img");
      image.src = "geotest.png";
      image.addEventListener("load", function () {
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");                // Get the context.
          // Set image smoothing to either bilinear (true) or nearest neighbor (false)
          if (smooth == true) {
            smooth = false;
          } else {
            smooth = true;
          ctx.msImageSmoothingEnabled = smooth;
          ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the last image, if it exists.
          // var image = document.getElementById("pix");       // Get the address of the picture.
          // Straight draw. 
          ctx.drawImage(image, 1, 1);
          // Stretch the image a bit.
          ctx.drawImage(image, 20, 20, 200, 200);
      }, false);

See also