lmgonzalves / pieces Goto Github PK

Hi,

With following:

<canvas class="my-canvas"></canvas>

<script src="anime.js"></script>
<script src="pieces.js"></script>
<script>
	var options = {
		canvas: '.my-canvas',
		text: 'Hello World',
		piecesWidth: 10,
		angle: 35
	};
	var myPieces = new Pieces(options);
	myPieces.showPieces();
</script>

I got this:

I'm using latest version of anime.js and pieces.js, btw I'm using Firefox, latest version.

Hello,
Everything is perfect, but there is a minor issue.
In mobile devices the canvas images showing blurry.
Would you please fix it and make the original smoother also for small devices?
This problem not happening on the responsive settings of the Desktop browser.
Please use real small devices like mobile to check the issue.
Thanks

Maybe it's a solution to it, but how can we apply its pieces? - https://dev.to/pahund/how-to-fix-blurry-text-on-html-canvases-on-mobile-phones-3iep

Error on console:
pieces.min.js:1 Uncaught TypeError: Cannot read property '0' of undefined at l.getPieces (pieces.min.js:1) at l.animatePieces (pieces.min.js:1) at l.showPieces (pieces.min.js:1) at showItems (app.js:122) at app.js:116 getPieces @ pieces.min.js:1 animatePieces @ pieces.min.js:1 showPieces @ pieces.min.js:1 showItems @ app.js:122 (anonymous) @ app.js:116

Error on file pices.min.js:
this.items[t].pieces:g.arr(t)?t.forEach(function(t){return g.num(t)?a(i,e.items[t].pieces):a(i,t.pieces)}):i=t.pieces,i},getItems:function(t){var e=this,i=[];return g.und(t)?i=this.items:g.num(t)?i=this.items[t]:g.arr(t)?t.forEach(function(t){return g.num(t)?i.push(e.items[t]):i.push(t)}):i=t,i},animatePieces:function(t){var e=n({duration:function(t){return t.duration},delay:function(t){return t.delay},easing:function(t){return t.easing},remove:!0,singly:!1},t),i=this.getPieces(t.items);e.remove&&anime.remove(i),e.ignore&&e.ignore.forEach(function(t){return delete e[t]}),e.singly?i.forEach(function(t){return anime(n(e,{targets:t}))}):anime(n(e,{targets:i}))},showPieces:function(t){var e=n({x:function(t){return t.s_x},y:function(t){return t.s_y},w:function(t){return t.s_w},h:function(t){return t.s_h},tx:function(t){return t.s_tx},ty:function(t){return t.s_ty}},t);this.animatePieces(e)},hidePieces:function(t){var e=n({x:function(t){return t.h_x},y:function(t){return t.h_y},w:function(t){return t.h_w},h:function(t){return t.h_h},tx:function(t){return t.h_tx},ty:function(t){return t.h_ty}},t);this.animatePieces(e)},animateItems:function(t){var e=n({easing:"linear",remove:!0},t,{targets:this.getItems(t.items)});e.remove&&anime.remove(e.targets),anime(e)}},l.version="1.0.0",l.random=anime.random,l.extend=n,l});