JSFiddle - React, Tailwind, and code Playground

by InVAMPED

HTML

<!DOCTYPE html> 
<html lang="en">
    <head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
   
   
            
   
    </head>
  
    <body>
    <div  data-role="page"> 
      
        <div data-role="content"><div id="contentholder"></div>
        <div id="img1" class="image"></div>
          <div id="img2" class="image"></div>
            <div id="img3" class="image"></div>
              <div id="img4" class="image"></div>
                <div id="img5" class="image"></div>
    </div> 
       
    </div>
    </body>
</html>

CSS

#mainCanvas
      {
        background-color: #000;
        border: solid 3px #0F0;
      }
      body
      {
        background: #000;
      }
      #contentholder
      {
        width: 99%;
        height: 99%;
        margin: 0 auto;
        text-align: center;
      }
      .image{ 
        position: absolute; 
        width:50px;
        height:50px;
        top: 0; 
        left: 0; 
        z-index: 50;
        background-color:#cccccc;
}

JavaScript

$(function() {
                var canvasContext;
                resizeCanvas();
                $(window).resize(function() { resizeCanvas() });
                  
                function resizeCanvas()
                {
                    var w = 600;
                    var h = 300;
                    var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';
                     
                    $('#contentholder').empty();
                    $(canvasString).appendTo('#contentholder');
                    canvasContext = $('#mainCanvas').get(0).getContext('2d'); 
                    var imgcount = 0; 

                    $('#mainCanvas').bind('tap', function(event){
                        touchX = event.pageX;
                        touchY = event.pageY;
                        
                        if(imgcount <= 4){
                        imgcount ++;
                        $('#img'+imgcount).css({'position':'absolute', 'top':touchY+'px'})
                        $('#img'+imgcount).css({'position':'absolute', 'left':touchX+'px'})
                         
                    }else{

                        alert('done.')

                    }
                    });
                }               
            });