Vanilla HTML/JS
No fancy framework, just the basics that your browser provides
Single render drawing
<!doctype html>
<html>
<body>
<canvas></canvas>
<script type="module">
import { render, c } from 'https://unpkg.com/declarativas@^0.0.1-beta?module=1';
const canvas = document.querySelector('canvas');
render(
canvas.getContext('2d'),
[
c('clearRect', {
x: 0,
y: 0,
width: canvas.width,
height: canvas.height,
}),
c('strokeStyle', { value: '#000' }),
c('strokeRect', {
x: 50,
y: 50,
width: 100,
height: 100,
})
]
);
</script>
</body>
</html>Render loop
<!doctype html>
<html>
<body>
<canvas width="640" height="480"></canvas>
<script type="module">
import { render, c } from 'https://unpkg.com/declarativas';
const makeApp = (canvas) => {
const myApp = (previousState) => (timestamp) => {
// -- state manipulation
const delta = previousState.lastRender > 0
? ((timestamp - previousState.lastRender) / 1000)
: 0;
const state = {
...previousState,
angle: (previousState.angle + (60 * delta)) % 360,
lastRender: timestamp,
};
// -- render
render(
canvas.getContext('2d'),
[
c('save'),
c('clearRect', {
x: 0,
y: 0,
width: canvas.width,
height: canvas.height,
}),
c('translate', { x: canvas.width / 2, y: canvas.height / 2 }),
c('rotate', { value: state.angle * Math.PI / 180 }),
c('fillStyle', { value: '#f0f' }),
c('fillRect', {
x: -50,
y: -50,
width: 100,
height: 100,
}),
c('restore'),
]
);
requestAnimationFrame(
myApp(nextState)
);
};
return myApp;
};
const app = makeApp(document.querySelector('canvas'));
requestAnimationFrame(app({
angle: 0,
lastRender: 0,
}));
</script>
</body>
</html>Last updated