---
url: /examples/textures/data.md
description: >-
Render a texture from raw pixel data and inspect how each texel maps onto the
canvas.
---
::: example-editor
```ts
import { glCanvas } from "@radiancejs/gl";
import "./styles.css";
glCanvas({
canvas: "#glCanvas",
fragment: /* glsl */ `
in vec2 vUv;
uniform sampler2D uDataTexture;
out vec4 fragColor;
void main() {
fragColor = texture(uDataTexture, vUv);
}
`,
uniforms: {
uDataTexture: {
data: new Uint8Array(
[
[255, 0, 0, 255], // red
[0, 255, 0, 255], // green
[0, 0, 255, 255], // blue
[255, 255, 0, 255], // yellow
[255, 0, 255, 255], // magenta
[0, 255, 255, 255], // cyan
[255, 255, 255, 255], // white
[128, 128, 128, 255], // gray
[0, 0, 0, 255], // black
].flat(),
),
width: 3,
height: 3,
magFilter: "nearest",
},
},
});
```
```css
html {
color-scheme: light dark;
}
body {
margin: 0;
}
canvas {
width: 100svw;
height: 100svh;
display: block;
}
```
```html
RadianceJS Example
```
:::