msImageSmoothingEnabled property
Choose bilinear or nearest-neighbor image smoothing when images are resized.
This property is read/write.
![]() ![]() |
Syntax
context.msImageSmoothingEnabled = false;
Property values
Type: bool
| Value | Condition |
|---|---|
|
Use bilinear scaling. |
|
Use nearest-neighbor scaling. |
Standards information
Remarks
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.

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

This property impacts drawing images and patterns on the following APIs.
- drawImage
- fill (with pattern)
- stroke (with pattern)
- fillText (with pattern)
- fillRect
- strokeRect
- strokeText
Examples
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> <head> <title>canvasImageTest </title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> </head> <body> <canvas id="MyCanvas" width="225" height="225"> </canvas> <p> <button onclick="draw()">Change smoothing </button> </p> <script type="text/javascript"> var smooth = true; draw(); 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); } </script> </body> </html>
See also

