Vanilla HTML/JS
No fancy framework, just the basics that your browser provides
Last updated
Was this helpful?
No fancy framework, just the basics that your browser provides
Last updated
Was this helpful?
Was this helpful?
<!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><!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>