---
title: Drawing and graphics
framework: swiftui
role: collectionGroup
role_heading: API Collection
path: swiftui/drawing-and-graphics
---

# Drawing and graphics

Enhance your views with graphical effects and customized drawings.

## Overview

Overview You create rich, dynamic user interfaces with the built-in views and Shapes that SwiftUI provides. To enhance any view, you can apply many of the graphical effects typically associated with a graphics context, like setting colors, adding masks, and creating composites.

When you need the flexibility of immediate mode drawing in a graphics context, use a Canvas view. This can be particularly helpful when you want to draw an extremely large number of dynamic shapes — for example, to create particle effects. For design guidance, see Materials and Color in the Human Interface Guidelines.

## Topics

### Composing graphics effects

- [Composing advanced graphics effects with SwiftUI](swiftui/composing-advanced-graphics-effects-with-swiftui.md)

### Immediate mode drawing

- [Add rich graphics to your SwiftUI app](swiftui/add-rich-graphics-to-your-swiftui-app.md)
- [Canvas](swiftui/canvas.md)
- [GraphicsContext](swiftui/graphicscontext.md)

### Setting a color

- [tint(_:)](swiftui/view/tint(_:).md)
- [Color](swiftui/color.md)

### Styling content

- [border(_:width:)](swiftui/view/border(_:width:).md)
- [foregroundStyle(_:)](swiftui/view/foregroundstyle(_:).md)
- [foregroundStyle(_:_:)](swiftui/view/foregroundstyle(_:_:).md)
- [foregroundStyle(_:_:_:)](swiftui/view/foregroundstyle(_:_:_:).md)
- [backgroundStyle(_:)](swiftui/view/backgroundstyle(_:).md)
- [backgroundStyle](swiftui/environmentvalues/backgroundstyle.md)
- [ShapeStyle](swiftui/shapestyle.md)
- [AnyShapeStyle](swiftui/anyshapestyle.md)
- [Gradient](swiftui/gradient.md)
- [MeshGradient](swiftui/meshgradient.md)
- [AnyGradient](swiftui/anygradient.md)
- [ShadowStyle](swiftui/shadowstyle.md)
- [Glass](swiftui/glass.md)

### Transforming colors

- [brightness(_:)](swiftui/view/brightness(_:).md)
- [contrast(_:)](swiftui/view/contrast(_:).md)
- [colorInvert()](swiftui/view/colorinvert().md)
- [colorMultiply(_:)](swiftui/view/colormultiply(_:).md)
- [saturation(_:)](swiftui/view/saturation(_:).md)
- [grayscale(_:)](swiftui/view/grayscale(_:).md)
- [hueRotation(_:)](swiftui/view/huerotation(_:).md)
- [luminanceToAlpha()](swiftui/view/luminancetoalpha().md)
- [materialActiveAppearance(_:)](swiftui/view/materialactiveappearance(_:).md)
- [materialActiveAppearance](swiftui/environmentvalues/materialactiveappearance.md)
- [MaterialActiveAppearance](swiftui/materialactiveappearance.md)

### Scaling, rotating, or transforming a view

- [scaledToFill()](swiftui/view/scaledtofill().md)
- [scaledToFit()](swiftui/view/scaledtofit().md)
- [scaleEffect(_:anchor:)](swiftui/view/scaleeffect(_:anchor:).md)
- [scaleEffect(_:anchor:)](swiftui/view/scaleeffect(_:anchor:).md)
- [scaleEffect(x:y:anchor:)](swiftui/view/scaleeffect(x:y:anchor:).md)
- [scaleEffect(x:y:z:anchor:)](swiftui/view/scaleeffect(x:y:z:anchor:).md)
- [aspectRatio(_:contentMode:)](swiftui/view/aspectratio(_:contentmode:).md)
- [rotationEffect(_:anchor:)](swiftui/view/rotationeffect(_:anchor:).md)
- [rotation3DEffect(_:axis:anchor:anchorZ:perspective:)](swiftui/view/rotation3deffect(_:axis:anchor:anchorz:perspective:).md)
- [perspectiveRotationEffect(_:axis:anchor:anchorZ:perspective:)](swiftui/view/perspectiverotationeffect(_:axis:anchor:anchorz:perspective:).md)
- [rotation3DEffect(_:anchor:)](swiftui/view/rotation3deffect(_:anchor:).md)
- [rotation3DEffect(_:axis:anchor:)](swiftui/view/rotation3deffect(_:axis:anchor:).md)
- [transformEffect(_:)](swiftui/view/transformeffect(_:).md)
- [transform3DEffect(_:)](swiftui/view/transform3deffect(_:).md)
- [projectionEffect(_:)](swiftui/view/projectioneffect(_:).md)
- [ProjectionTransform](swiftui/projectiontransform.md)
- [ContentMode](swiftui/contentmode.md)

### Masking and clipping

- [mask(alignment:_:)](swiftui/view/mask(alignment:_:).md)
- [clipped(antialiased:)](swiftui/view/clipped(antialiased:).md)
- [clipShape(_:style:)](swiftui/view/clipshape(_:style:).md)

### Applying blur and shadows

- [blur(radius:opaque:)](swiftui/view/blur(radius:opaque:).md)
- [shadow(color:radius:x:y:)](swiftui/view/shadow(color:radius:x:y:).md)
- [ColorMatrix](swiftui/colormatrix.md)

### Applying effects based on geometry

- [visualEffect(_:)](swiftui/view/visualeffect(_:).md)
- [visualEffect3D(_:)](swiftui/view/visualeffect3d(_:).md)
- [VisualEffect](swiftui/visualeffect.md)
- [EmptyVisualEffect](swiftui/emptyvisualeffect.md)

### Compositing views

- [blendMode(_:)](swiftui/view/blendmode(_:).md)
- [compositingGroup()](swiftui/view/compositinggroup().md)
- [drawingGroup(opaque:colorMode:)](swiftui/view/drawinggroup(opaque:colormode:).md)
- [BlendMode](swiftui/blendmode.md)
- [ColorRenderingMode](swiftui/colorrenderingmode.md)
- [CompositorContent](swiftui/compositorcontent.md)
- [CompositorContentBuilder](swiftui/compositorcontentbuilder.md)
- [AnyCompositorContent](swiftui/anycompositorcontent.md)

### Measuring a view

- [GeometryReader](swiftui/geometryreader.md)
- [GeometryReader3D](swiftui/geometryreader3d.md)
- [GeometryProxy](swiftui/geometryproxy.md)
- [GeometryProxy3D](swiftui/geometryproxy3d.md)
- [coordinateSpace(_:)](swiftui/view/coordinatespace(_:).md)
- [CoordinateSpace](swiftui/coordinatespace.md)
- [CoordinateSpaceProtocol](swiftui/coordinatespaceprotocol.md)
- [PhysicalMetric](swiftui/physicalmetric.md)
- [PhysicalMetricsConverter](swiftui/physicalmetricsconverter.md)

### Responding to a geometry change

- [onGeometryChange(for:of:action:)](swiftui/view/ongeometrychange(for:of:action:).md)

### Accessing Metal shaders

- [colorEffect(_:isEnabled:)](swiftui/view/coloreffect(_:isenabled:).md)
- [distortionEffect(_:maxSampleOffset:isEnabled:)](swiftui/view/distortioneffect(_:maxsampleoffset:isenabled:).md)
- [layerEffect(_:maxSampleOffset:isEnabled:)](swiftui/view/layereffect(_:maxsampleoffset:isenabled:).md)
- [Shader](swiftui/shader.md)
- [ShaderFunction](swiftui/shaderfunction.md)
- [ShaderLibrary](swiftui/shaderlibrary.md)

### Accessing geometric constructs

- [Axis](swiftui/axis.md)
- [Angle](swiftui/angle.md)
- [UnitPoint](swiftui/unitpoint.md)
- [UnitPoint3D](swiftui/unitpoint3d.md)
- [Anchor](swiftui/anchor.md)
- [DepthAlignmentID](swiftui/depthalignmentid.md)
- [Alignment3D](swiftui/alignment3d.md)
- [GeometryProxyCoordinateSpace3D](swiftui/geometryproxycoordinatespace3d.md)

## See Also

### Views

- [View fundamentals](swiftui/view-fundamentals.md)
- [View configuration](swiftui/view-configuration.md)
- [View styles](swiftui/view-styles.md)
- [Animations](swiftui/animations.md)
- [Text input and output](swiftui/text-input-and-output.md)
- [Images](swiftui/images.md)
- [Controls and indicators](swiftui/controls-and-indicators.md)
- [Menus and commands](swiftui/menus-and-commands.md)
- [Shapes](swiftui/shapes.md)