<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>KonvaJS Sandbox</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0"
/>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
}
</style>
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
<script>
// TouchEmulator();
</script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.7/hammer.js"></script> -->
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
<!-- <script src="./hammer.js"></script> -->
<!-- <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.js"></script> -->
</head>
<body>
<div id="container" style="background-color: bisque"></div>
<script type="module">
import Konva from '../src/index.ts';
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth / 2,
height: window.innerHeight / 2,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Rect({
x: 0,
y: 0,
width: 100,
height: 100,
fill: 'red',
filters: [Konva.Filters.Blur],
blurRadius: 10,
});
layer.add(rect);
rect.cache();
setInterval(() => {
rect.blurRadius(rect.blurRadius() + 1);
}, 100);
</script>
</body>
</html>