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>

PreviousDeclarativas API NextWith Ferp

Last updated 4 years ago

Was this helpful?