ageSmoothingEnabled - Web APIs

• Skip to main content
• Skip to search

CanvasRenderingContext2D: imageSmoothingEnabled property Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨April 2017⁩.

• Learn more
• See full compatibility
• Report feedback

The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.

This property is useful for games and other apps that use pixel art. When enlarging images, the default resizing algorithm will blur the pixels. Set this property to false to retain the pixels' sharpness.

Note: You can adjust the smoothing quality with the imageSmoothingQuality property.

In this article

• Value
• Examples
• Specifications
• Browser compatibility
• See also

Value

A boolean value indicating whether to smooth scaled images or not. The default value is true.

Examples

Disabling image smoothing

This example compares three images. The first image is drawn at its natural size, the second is scaled to 3X and drawn with image smoothing enabled, and the third is scaled to 3X but drawn with image smoothing disabled.

HTML

html<canvas id="canvas" width="460" height="210"></canvas>

JavaScript

jsconst canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.font = "16px sans-serif"; ctx.textAlign = "center"; const img = new Image(); img.src = "/shared-assets/images/examples/big-star.png"; img.onload = () => { const w = img.width, h = img.height; ctx.fillText("Source", w * 0.5, 20); ctx.drawImage(img, 0, 24, w, h); ctx.fillText("Smoothing = TRUE", w * 2.5, 20); ctx.imageSmoothingEnabled = true; ctx.drawImage(img, w, 24, w * 3, h * 3); ctx.fillText("Smoothing = FALSE", w * 5.5, 20); ctx.imageSmoothingEnabled = false; ctx.drawImage(img, w * 4, 24, w * 3, h * 3); };

Result

Specifications

Specification
HTML# dom-context-2d-imagesmoothingenabled-dev

Browser compatibility

See also

• The interface defining this property: CanvasRenderingContext2D
• CanvasRenderingContext2D.imageSmoothingQuality
• image-rendering

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on ⁨Sep 25, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar

1. Canvas API
2. CanvasRenderingContext2D
3. Instance properties
   1. canvas
   2. direction
   3. fillStyle
   4. filter
   5. font
   6. fontKerning
   7. fontStretch
   8. fontVariantCaps
   9. globalAlpha
   10. globalCompositeOperation
   11. imageSmoothingEnabled
   12. imageSmoothingQuality
   13. lang Experimental
   14. letterSpacing
   15. lineCap
   16. lineDashOffset
   17. lineJoin
   18. lineWidth
   19. miterLimit
   20. shadowBlur
   21. shadowColor
   22. shadowOffsetX
   23. shadowOffsetY
   24. strokeStyle
   25. textAlign
   26. textBaseline
   27. textRendering
   28. wordSpacing
4. Instance methods
   1. arc()
   2. arcTo()
   3. beginPath()
   4. bezierCurveTo()
   5. clearRect()
   6. clip()
   7. closePath()
   8. createConicGradient()
   9. createImageData()
   10. createLinearGradient()
   11. createPattern()
   12. createRadialGradient()
   13. drawFocusIfNeeded()
   14. drawImage()
   15. ellipse()
   16. fill()
   17. fillRect()
   18. fillText()
   19. getContextAttributes()
   20. getImageData()
   21. getLineDash()
   22. getTransform()
   23. isContextLost()
   24. isPointInPath()
   25. isPointInStroke()
   26. lineTo()
   27. measureText()
   28. moveTo()
   29. putImageData()
   30. quadraticCurveTo()
   31. rect()
   32. reset()
   33. resetTransform()
   34. restore()
   35. rotate()
   36. roundRect()
   37. save()
   38. scale()
   39. setLineDash()
   40. setTransform()
   41. stroke()
   42. strokeRect()
   43. strokeText()
   44. transform()
   45. translate()
5. Related pages for Canvas API
   1. CanvasGradient
   2. CanvasPattern
   3. HTMLCanvasElement
   4. ImageBitmap
   5. ImageBitmapRenderingContext
   6. ImageData
   7. OffscreenCanvas
   8. OffscreenCanvasRenderingContext2D
   9. Path2D
   10. TextMetrics
   11. Window.createImageBitmap()
   12. WorkerGlobalScope.createImageBitmap()
6. Guides
   1. Manipulating video using canvas
7. Tutorial
   1. Canvas tutorial
   2. Basic usage of canvas
   3. Drawing shapes with canvas
   4. Applying styles and colors
   5. Drawing text
   6. Using images
   7. Transformations
   8. Compositing and clipping
   9. Basic animations
   10. Advanced animations
   11. Pixel manipulation with canvas
   12. Optimizing canvas
   13. Finale