JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100" />
<div style="position: relative">
<canvas id="myCanvas" width="1238" height="664" style="position: absolute; z-index: 0;">
    Fallback content (náhradní obsah) pro prohlížeče, které canvas nepodporují.
</canvas>
<canvas id="myCanvasFg" width="1238" height="664" style="position: absolute; z-index: 1;">
    Fallback content (náhradní obsah) pro prohlížeče, které canvas nepodporují.
</canvas>
</div>

CSS

body{
    
}

JavaScript

window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

var cloudsX = 0;
var clouds2X = 0;
var figureX = 50;
var figure2X = 933;

var background = new Image();
background.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/presentation-background.jpg";

var cloud1 = new Image();
cloud1.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/clouds-p2.png";

var cloud2 = new Image();
cloud2.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/clouds-p1.png";

var ground1 = new Image();
ground1.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/ground1.png";

var ground2 = new Image();
ground2.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/ground2.png";

var figure1 = new Image();
figure1.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/figure1.png";

var figure2 = new Image();
figure2.src = "http://www.modernisvatba.cz/Blog/css/theme/1/content/figure2.png";

// Odkaz na canvas
var elem = document.getElementById('myCanvas');
var elemFg = document.getElementById('myCanvasFg');

// Vždy kontrolujte dostupnost vlastností a metod, to aby skript skript
// v nějakém prohlížeči "nehavaroval".
if (elem && elem.getContext) {
    // získáme 2d context.
    // Zapamatujte si: pro jednu značku canvas můžete inicializovat jen 1 context.
    var context = elem.getContext('2d');
    if (context) {
        elem.width = elem.width;
    }
}
if (elemFg && elemFg.getContext) {
    // získáme 2d context.
    // Zapamatujte si: pro jednu značku canvas můžete inicializovat jen 1 context.
    var contextFg = elemFg.getContext('2d');
    if (context) {
        elemFg.width =...