---
url: /examples/basics/drawing-modes.md
description: >-
Compare WebGL drawing modes by rendering the same geometry with different
primitive types.
---
::: example-editor
```ts
import { glCanvas } from "@radiancejs/gl";
import "./styles.css";
glCanvas({
canvas: "#glCanvas",
fragment: /* glsl */ `
varying vec4 v_color;
void main () {
gl_FragColor = v_color;
}
`,
vertex: /* glsl */ `
attribute vec4 position;
attribute vec4 color;
varying vec4 v_color;
void main () {
gl_Position = position;
v_color = color;
// Only for the drawing mode "POINTS"
gl_PointSize = 40.;
}
`,
attributes: {
position: {
data: [
[-0.5, -0.5],
[-0.5, 0.5],
[0.5, 0.5],
[0.5, -0.5],
].flat(),
size: 2,
},
color: {
data: [
[0, 1, 1],
[0, 1, 0],
[0, 0, 1],
[0, 1, 1],
].flat(),
size: 3,
},
},
// drawMode: "LINES",
// drawMode: "LINE_STRIP",
// drawMode: "LINE_LOOP",
// drawMode: "POINTS",
// drawMode: "TRIANGLES",
// drawMode: "TRIANGLE_FAN",
drawMode: "TRIANGLE_STRIP",
});
```
```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
```
:::