---
title: Target
description: "The [Target](/api/core/target) interface (trait in Rust) is a rendering destination for the [Renderer](/api/core/renderer) implemented by both [WindowTarget](/api/targets/windowtarget) and [TextureTarget](/api/targets/texturetarget)."
category: targets
categoryLabel: Targets
---

import { Code, Tabs, TabItem, Aside } from "@astrojs/starlight/components";

## Description

The [Target](/api/core/target) interface (trait in Rust) is a rendering destination for the [Renderer](/api/core/renderer) implemented by both [WindowTarget](/api/targets/windowtarget) and [TextureTarget](/api/targets/texturetarget).

It contains a GPU surface texture attached to a platform-specific window or an offscreen texture for headless rendering (see [TextureTarget](/api/targets/texturetarget)).

[Target](/api/core/target) constructors are private and can only be created via the [Renderer](/api/core/renderer) using either `Renderer.create_target(window)` for on-screen rendering, or `Renderer.create_texture_target()` for offscreen rendering.



## Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
async fn run() -> Result<(), Box<dyn std::error::Error>> {

use fragmentcolor::{Renderer, Shader};

let renderer = Renderer::new();

// Use your platform's windowing system to create a window.
// We officially support Winit. Check the examples folder for details.
let window = fragmentcolor::headless_window([800, 600]);

let target = renderer.create_target(window).await?;

// To animate, render again in your event loop...
renderer.render(&Shader::default(), &target)?;
renderer.render(&Shader::default(), &target)?;

Ok(())
}
fn main() -> Result<(), Box<dyn std::error::Error>> { pollster::block_on(run()) }
`}
lang="rust" meta="collapse={1-1, 17-19}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`

import { Renderer, Shader } from "fragmentcolor";

const renderer = new Renderer();

// Use your platform's windowing system to create a window.
// We officially support Winit. Check the examples folder for details.
const canvas = document.createElement('canvas');

const target = await renderer.createTarget(canvas);

// To animate, render again in your event loop...
renderer.render(new Shader(""), target);
renderer.render(new Shader(""), target);

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`
from rendercanvas.auto import RenderCanvas, loop

from fragmentcolor import Renderer, Shader

renderer = Renderer()

# Use your platform's windowing system to create a window.
# We officially support Winit. Check the examples folder for details.
canvas = RenderCanvas(size=(800, 600))

target = renderer.create_target(canvas)

# To animate, render again in your event loop...
renderer.render(Shader(""), target)
renderer.render(Shader(""), target)

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>


## Methods


---

### Target::get_image() -&gt; Vec`Vec<u8>`

Returns the current contents of the target as a byte array in RGBA8 format.

#### Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
async fn run() -> Result<(), Box<dyn std::error::Error>> {

use fragmentcolor::{Shader, Renderer, Target};

let renderer = Renderer::new();
let target = renderer.create_texture_target([16, 16]).await?;
renderer.render(&Shader::default(), &target)?;

let image = target.get_image();

assert_eq!(image.len(), 16 * 16 * 4); // RGBA8
Ok(())
}
fn main() -> Result<(), Box<dyn std::error::Error>> { pollster::block_on(run()) }
`}
lang="rust" meta="collapse={1-1, 11-14}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`

import { Shader, Renderer } from "fragmentcolor";

const renderer = new Renderer();
const target = await renderer.createTextureTarget([16, 16]);
renderer.render(new Shader(""), target);

const image = target.getImage();

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`
from rendercanvas.auto import RenderCanvas, loop

from fragmentcolor import Shader, Renderer

renderer = Renderer()
target = renderer.create_texture_target([16, 16])
renderer.render(Shader(""), target)

image = target.get_image()

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>


---

### Target::resize(size: Size &#123; width, heigth &#125; | (u32, u32) | [u32; 2])

Resizes the [Target](/api/core/target) to the given width and height.

#### Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
async fn run() -> Result<(), Box<dyn std::error::Error>> {

use fragmentcolor::{Renderer, Target};

let renderer = Renderer::new();
let mut target = renderer.create_texture_target([64, 32]).await?;

target.resize([128, 64]);

let size: [u32; 2] = target.size().into();
assert_eq!(size, [128, 64]);
Ok(())
}
fn main() -> Result<(), Box<dyn std::error::Error>> { pollster::block_on(run()) }
`}
lang="rust" meta="collapse={1-1, 10-14}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`

import { Renderer } from "fragmentcolor";

const renderer = new Renderer();
const target = await renderer.createTextureTarget([64, 32]);

target.resize([128, 64]);

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`

from fragmentcolor import Renderer

renderer = Renderer()
target = renderer.create_texture_target([64, 32])

target.resize([128, 64])

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>


---

### Target::size() -&gt; Size &#123; width, height &#125;

Returns the size of the [Target](/api/core/target) in pixels.

#### Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
async fn run() -> Result<(), Box<dyn std::error::Error>> {

use fragmentcolor::{Renderer, Target};

let renderer = Renderer::new();
let target = renderer.create_texture_target([64, 32]).await?;
let size = target.size();
let width = size.width;
let height = size.height;
let depth = size.depth;

assert_eq!(size.width, 64);
assert_eq!(size.height, 32);
assert_eq!(size.depth, Some(1));
let size: [u32; 2] = target.size().into();
assert_eq!(size, [64, 32]);
let size: [u32; 3] = target.size().into();
assert_eq!(size, [64, 32, 1]);
Ok(())
}
fn main() -> Result<(), Box<dyn std::error::Error>> { pollster::block_on(run()) }
`}
lang="rust" meta="collapse={1-1, 12-21}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`

import { Renderer } from "fragmentcolor";

const renderer = new Renderer();
const target = await renderer.createTextureTarget([64, 32]);
const size = target.size();
const width = size.width;
const height = size.height;
const depth = size.depth;

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`

from fragmentcolor import Renderer

renderer = Renderer()
target = renderer.create_texture_target([64, 32])
size = target.size
width = size.width
height = size.height
depth = size.depth

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>
