You can use nodejs and npm to grab the latest copy of declarativas to get going in seconds.
$ npm install --save declarativas
# OR
$ yarn add declarativas
import { render, createElement as c, ClearCanvas, Properties, StrokeRect } from 'declarativas';
// Get your canvas from an HTML file.
const canvas = document.querySelector('canvas');
render(
[
c(ClearCanvas),
c(Properties, { strokeStyle: 'black' }),
c(StrokeRect, {
x: 100,
y: 100,
w: 20,
h: 20,
})
]),
canvas.getContext('2d'),
);
<!doctype html>
<html>
<body>
<canvas></canvas>
<!-- CDN Import -->
<script type="javascript" src="https://unpkg.com/declarativas"></script>
<!-- Code -->
<script type="javascript">
const { render, createElement as c, ClearCanvas, Properties, StrokeRect } = window.declarativas;
const canvas = document.querySelector('canvas');
render(
[
c(ClearCanvas),
c(Properties, { strokeStyle: 'black' }),
c(StrokeRect, {
x: 100,
y: 100,
w: 20,
h: 20,
})
]),
canvas.getContext('2d'),
);
</script>
</body>
</html>