---
url: /examples/textures/canvas2d.md
description: Draw content in a 2D canvas and reuse it as a texture in a WebGL scene.
---
::: example-editor
```ts
import { glCanvas } from "@radiancejs/gl";
import "./styles.css";
const canvas2d = drawIn2dCanvas();
const webglCanvas = document.querySelector("canvas")!;
// don't forget to make the content accessible !
webglCanvas.ariaLabel = "TEXT rendered in a 2D canvas";
glCanvas({
canvas: webglCanvas,
fragment: /* glsl */ `
varying vec2 vUv;
uniform sampler2D uTexture;
void main() {
gl_FragColor = texture(uTexture, vUv);
}
`,
uniforms: {
uTexture: {
src: canvas2d,
},
},
});
function drawIn2dCanvas() {
const canvas2d = document.createElement("canvas");
const SIZE = 1024;
canvas2d.width = canvas2d.height = SIZE;
const ctx = canvas2d.getContext("2d", { alpha: false })!;
ctx.fillStyle = "#012";
ctx.beginPath();
ctx.arc(SIZE / 2, SIZE / 2, 300, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "100px sans-serif";
ctx.fillText("TEXT", SIZE / 2, SIZE / 2);
ctx.font = "40px sans-serif";
ctx.fillText("rendered in a 2D canvas", SIZE / 2, SIZE / 2 + 60);
return canvas2d;
}
```
```css
html {
color-scheme: light dark;
}
body {
margin: 0;
height: 100svh;
display: grid;
place-items: center;
}
canvas {
width: min(90svmin, 900px);
aspect-ratio: 1;
display: block;
border-radius: 8px;
border: 1px solid rgb(128 128 128 / 0.4);
}
```
```html
RadianceJS Example
```
:::