Quick Start
Include the script and write your sketch code:
<script src="https://cdn.trussc.org/sketch.js"></script>
<script type="text/tcs">
void draw() {
clear(0.1);
setColor(1, 0.5, 0.2);
drawCircle(getMouseX(), getMouseY(), 30);
}
</script>
That's it! A fullscreen canvas is automatically created as a background layer.
Full HTML Example
Copy this complete example to get started:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Site</title>
<style>
body { margin: 0; color: white; font-family: sans-serif; }
.content { position: relative; z-index: 1; padding: 2rem; }
</style>
</head>
<body>
<div class="content">
<h1>Hello World</h1>
<p>Your content goes here.</p>
</div>
<script src="https://cdn.trussc.org/sketch.js"></script>
<script type="text/tcs">
float t = 0;
void draw() {
t += getDeltaTime();
clear(0.05);
float cx = getWindowWidth() / 2;
float cy = getWindowHeight() / 2;
// Pulsing circles
for (int i = 0; i < 5; i++) {
float r = 50 + i * 40 + sin(t * 2) * 20;
setColor(0.3, 0.5, 0.9, 0.2);
drawCircle(cx, cy, r);
}
}
</script>
</body>
</html>
Custom Canvas
Target a specific canvas element instead of fullscreen:
<canvas id="myCanvas" width="400" height="300"></canvas>
<script src="https://cdn.trussc.org/sketch.js"></script>
<script type="text/tcs" data-canvas="myCanvas">
void draw() {
clear(0.1);
drawCircle(200, 150, 50);
}
</script>
External File
Load your sketch from a separate .tcs file:
<script src="https://cdn.trussc.org/sketch.js"></script>
<script type="text/tcs" src="sketch.tcs"></script>
This keeps your code organized and makes it easier to edit.
Self-Hosting
For version stability, download and host the files yourself:
- sketch.js - Loader script
- TrussSketch.js - Runtime
- TrussSketch.wasm - WebAssembly (~2.8MB)
Place them in the same directory and reference your local sketch.js.
Learn More
- Sketch Editor - Interactive playground with autocomplete
- API Reference - All available functions
- Examples - See what's possible