ageSmoothingEnabled - Web APIs

• Skip to main content
• Skip to search
• Skip to select language

1. References
2. Web APIs
3. CanvasRenderingContext2D
4. imageSmoothingEnabled

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Français
  • 日本語
  • 中文 (简体)

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

1. CanvasRenderingContext2D
2. 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. letterSpacing
   14. lineCap
   15. lineDashOffset
   16. lineJoin
   17. lineWidth
   18. miterLimit
   19. shadowBlur
   20. shadowColor
   21. shadowOffsetX
   22. shadowOffsetY
   23. strokeStyle
   24. textAlign
   25. textBaseline
   26. textRendering
   27. wordSpacing
3. 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()

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

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.

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 = "https://interactive-examples.mdn.mozilla.net/media/examples/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 Standard # dom-context-2d-imagesmoothingenabled-dev

Browser compatibility

BCD tables only load in the browser

See also

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

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Jul 26, 2024 by MDN contributors.

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