# Screens
A screen is the root of an interface. It is an entity with a [screen](https://developer.playcanvas.com/user-manual/editor/scenes/components/screen.md) component, and the [elements](https://developer.playcanvas.com/user-manual/user-interface/elements.md) below it are laid out in its space. The screen decides whether the interface is drawn over the camera's view or placed in the scene, what its units measure, and how it grows and shrinks with the canvas.
## Screen Space and World Space
[Image: A 3D scene with a panel standing in it, seen in perspective, and a flat HUD with a bar and buttons drawn over the view]
A **screen-space** screen is drawn over the camera's view, wherever the camera is, and is always the size of the canvas. Use it for HUDs, menus and any other interface that belongs to the screen rather than the world.
A **world-space** screen is placed in the scene by its entity's transform and drawn with the rest of the scene: a sign on a wall, a panel above a machine or a menu in [XR](https://developer.playcanvas.com/user-manual/user-interface/xr.md). Its size is its `resolution`, in the entity's local units, centered on the entity. See [World-Space UI](https://developer.playcanvas.com/user-manual/user-interface/world-space-ui.md).
**Engine**
```javascript
// Drawn over the camera's view, the size of the canvas
const hud = new pc.Entity('hud');
hud.addComponent('screen', {
screenSpace: true,
scaleMode: pc.SCALEMODE_BLEND,
referenceResolution: [1280, 720]
});
app.root.addChild(hud);
// Placed in the scene: 640 × 320 units, scaled to 6.4 × 3.2 meters
const sign = new pc.Entity('sign');
sign.addComponent('screen', {
screenSpace: false,
resolution: [640, 320]
});
sign.setLocalScale(0.01, 0.01, 0.01);
sign.setPosition(0, 2, -5);
app.root.addChild(sign);
```
**Editor**
In the Hierarchy, click **+** and choose **User Interface › 2D Screen** for a screen-space screen, or **User Interface › 3D Screen** for a world-space one. The entity of a 3D Screen is created with a scale of 0.01.
To switch an existing screen between the two, toggle **Screen Space** on its Screen component. The inspector shows **Resolution** only for world-space screens, and **Scale Mode** only for screen-space ones.
**React**
```jsx
```
`` is a screen-space screen unless you set `screenSpace={false}`.
**Web Components**
```html
```
`` is a world-space screen unless it has the `screen-space` attribute.
Both kinds hold the same elements, laid out in the same way.
## Units and Resolution
Elements are positioned and sized in screen units, with the y axis pointing up. What a unit measures depends on the screen:
| Screen | Resolution | One unit is |
| --- | --- | --- |
| Screen space, **Scale Mode** None | The size of the canvas's drawing buffer, updated whenever the canvas is resized | One pixel of the drawing buffer |
| Screen space, **Scale Mode** Blend | The same | `scale` pixels of the drawing buffer. See [Scaling with Blend](https://developer.playcanvas.com/user-manual/user-interface/screens.md#scaling-with-blend) |
| World space | The `resolution` you set, 640 × 320 by default | One unit of the entity's local space |
A screen-space screen sets its own resolution, so writing to `resolution` has no effect on it. When the canvas changes size, elements anchored to the screen's edges and corners move with them.
## Scaling with Blend
With **Scale Mode** set to **None**, an interface is built in pixels and keeps its size in pixels. An interface that fits the canvas it was designed for looks small on a larger canvas, and runs off the edges of a smaller one. With **Blend**, you design the interface at a **reference resolution**, and the screen scales it to the canvas it is shown on, so it keeps its proportions everywhere:
[Image: The same interface on a small and a large canvas. With Scale Mode None, in the top row, it overflows the small canvas and looks small on the large one. With Blend, in the bottom row, it is scaled to fit both]
**Engine**
```javascript
const screen = new pc.Entity('screen');
screen.addComponent('screen', {
screenSpace: true,
scaleMode: pc.SCALEMODE_BLEND,
referenceResolution: [1280, 720],
scaleBlend: 0.5
});
app.root.addChild(screen);
```
To change the reference resolution later, assign a new `pc.Vec2` to `referenceResolution`.
**Editor**
Set **Scale Mode** to **Blend**, then set **Ref Resolution** and **Scale Blend**. The inspector shows these two fields only in Blend mode.
**React**
```jsx
```
`` scales with Blend unless you set `scaleMode="none"`.
**Web Components**
```html
```
The screen compares the canvas with the reference resolution one axis at a time, and **Scale Blend** weights the two axes:
```none
scale = (width / reference width) ^ (1 - Scale Blend) × (height / reference height) ^ Scale Blend
```
With a reference resolution of 1280 × 720, a 1920 × 1080 canvas scales the interface by 1.5 and a 640 × 360 canvas by 0.5, whatever the Scale Blend, because both canvases have the same shape as the reference. Scale Blend only matters when the canvas has a different shape. The screen's `scale` property holds the current factor.
Scale Mode applies only to screen-space screens. A world-space screen is always unscaled, so size it with its entity's scale instead.
### Choosing the Scale Blend
**Scale Blend** decides which dimension of the canvas the interface follows:
| Scale Blend | The interface scales with | Suits |
| --- | --- | --- |
| 0 | The width of the canvas | Portrait layouts, and interfaces that must always fit across the canvas |
| 0.5 | The width and the height equally | Interfaces shown in both orientations. Turning a phone on its side does not change the scale |
| 1 | The height of the canvas | Landscape games, whose HUD must fit from top to bottom |
[Image: A landscape and a portrait canvas for each Scale Blend: 0 on the left, 0.5 in the middle and 1 on the right. In portrait, 0 makes the interface small enough to fit the width, 0.5 keeps it the size it has in landscape, and 1 makes it too wide to fit]
At 0.5, the scale depends only on the area of the canvas, so turning a phone on its side keeps the interface the same size, but a layout designed for a landscape reference resolution can be too wide for a portrait canvas. To keep the whole reference area on screen, whatever the shape of the canvas, follow whichever axis has less room and check again whenever the canvas changes size:
```javascript
// Follow whichever axis has less room, so the whole reference area stays on screen
const fitReference = () => {
const { resolution, referenceResolution } = screen.screen;
const wider = resolution.x / referenceResolution.x > resolution.y / referenceResolution.y;
screen.screen.scaleBlend = wider ? 1 : 0;
};
fitReference();
app.graphicsDevice.on('resizecanvas', fitReference);
```
[Live example: Screen Scaling](https://playcanvas.com/examples/#/user-interface/screen-scaling) ([source](https://github.com/playcanvas/engine/blob/main/examples/src/examples/user-interface/screen-scaling.example.mjs))
## Pixel Ratio
On a high-density display, the canvas's drawing buffer can have more pixels than the canvas has CSS pixels on the page. That makes rendering sharper, and costs more to draw. The graphics device's `maxPixelRatio` caps the ratio between the two, and each surface sets it differently:
| Surface | Drawing buffer, by default |
| --- | --- |
| Engine | The canvas's CSS size, as `maxPixelRatio` is 1. Set `app.graphicsDevice.maxPixelRatio` to `window.devicePixelRatio` for full resolution |
| Editor | The CSS size, or the display's full pixel ratio when **Device Pixel Ratio** is enabled in the Rendering settings |
| React | The CSS size. Set `maxPixelRatio` on the graphics device of the application that `useApp()` returns |
| Web Components | The display's full pixel ratio. Cap it with the `max-pixel-ratio` attribute of `` |
The pixel ratio affects the two scale modes differently:
- **Blend:** the screen's resolution and its scale grow together, so a higher pixel ratio leaves the interface the same size on the page and only makes it sharper.
- **None:** one unit is one pixel of the drawing buffer, so a higher pixel ratio makes the interface smaller. At a pixel ratio of 2, a 100 unit button is 50 CSS pixels wide.
### Pixel-Perfect Images
With Scale Mode None, an image element the size of its texture draws each texel as one pixel of the drawing buffer, which keeps pixel art and small icons crisp. Keep such elements on whole pixels: anchor them to a corner rather than a center, which falls between two pixels on a canvas with an odd width or height, and avoid sizes that put an edge halfway between pixels, such as an odd width with a centered pivot. To draw pixel art at two or three times its size without blurring, set the texture's `minFilter` and `magFilter` to `pc.FILTER_NEAREST`.
## Responsive Layouts
A screen-space interface follows the canvas, and the canvas is sized outside the screen:
| Surface | The canvas is sized by |
| --- | --- |
| Engine | The application's fill mode. `pc.FILLMODE_FILL_WINDOW` fills the window, `pc.FILLMODE_KEEP_ASPECT` fills as much of it as the canvas's aspect ratio allows, and `pc.FILLMODE_NONE` leaves the size to your CSS. Call `app.resizeCanvas()` when the window changes size |
| Editor | **Fill Mode** and **Resolution Mode** in the Rendering settings |
| React | The element that contains ``, as the canvas fills it by default |
| Web Components | The page's CSS, which sizes `` as it would a `