<?php
$angleselect = "<select id='asel' onchange='javascript: myang=this.value; '><option value='0'>Please choose angle of placement</option>";
echo '<html>';
echo '<head>';
echo '<title>Canvas HTML Element Primer Tutorial ... RJM Programming ... December 2013 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>';
echo '<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1" />';
echo "\n <style>";
echo "\n .circle { ";
echo "\n height: 70px; ";
echo "\n width: 70px; ";
echo "\n -moz-border-radius: 35px; ";
echo "\n border-radius: 35px; ";
echo "\n } ";
for ($ideg=0; $ideg <= 360; $ideg++) {
$angleselect .= "<option value='" . $ideg . "'>" . $ideg . "&deg;</option>";
echo "\n .myrotatedo" . $ideg;
echo "\n { ";
echo "transform: rotate(" . $ideg . "deg); \n";
echo "-ms-transform: rotate(" . $ideg . "deg); /* IE 9 */ \n";
echo "-webkit-transform: rotate(" . $ideg . "deg); /* Safari and Chrome */ \n";
echo "\n } ";
}
echo "\n </style>";
echo "\n </head>";
echo "\n <body>";
echo "\n <h1>Click to place top left of random rectangles and arcs</h1> " . $angleselect . "</select><br>";
?>
<canvas title='Click to place top left of random rectangles and arcs' id="canvaselement" width="900" height="500" style="border: 1px solid green;" />
<script language="JavaScript">
var myang = 0;
var elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
var context = elem.getContext('2d');
var elements = [];
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
   var x = event.pageX - elemLeft;
   var y = event.pageY - elemTop;
   var classis = 'myrotatedo' + myang;

   var done=0;
   var mode = Math.floor((Math.random()*2)+0); 
   var amode = Math.floor((Math.random()*2)+0); 
   var twenty = Math.floor((Math.random()*20)+1); 
   var hgt = Math.floor((Math.random()*150)+1); 
   var wdt = Math.floor((Math.random()*100)+1); 
   var r = Math.floor((Math.random()*256)+0); 
   var g = Math.floor((Math.random()*256)+0); 
   var b = Math.floor((Math.random()*256)+0); 
   var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16))  / 16] + arr[g % 16] + arr[(b-(b % 16))  / 16] + arr[b % 16];


	// Add element
	elements.push({
	    class: classis,
    	colour: thiscol,
    	width: wdt,
    	height: hgt,
    	top: y,
    	left: x
	});


    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('Clicked Element at ' + element.left + ',' + element.top + ' with width=' + element.width + ' and height=' + element.height + ' and colour=' + element.colour + ' and class=' + element.class);
        } else if (mode != 0) {
            context.fillStyle = element.colour;
            context.fillRect(element.left, element.top, element.width, element.height);
        } else {
			context.beginPath();
			context.arc(element.left, element.top, element.width, element.height, (0.1 * twenty)*Math.PI);
			if (amode > 0) {
			  context.stroke();
			} else {
			  context.fillStyle = element.colour;
			  context.fill(); 
			}        
		}
    });


            if (myang != 0 && done == 0) {
              done = 1;
              context.rotate((Math.PI * myang) / 180.0);
            }

}, false);

function redraw() {
    elem.width = elem.width;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (mode != 0) {
            context.fillStyle = element.colour;
            context.fillRect(element.left, element.top, element.width, element.height);
        } else {
			context.beginPath();
			context.arc(element.left, element.top, element.width, element.height, (0.1 * twenty)*Math.PI);
			if (amode > 0) {
			  context.stroke();
			} else {
			  context.fillStyle = element.colour;
			  context.fill(); 
			}        
		}
    });

            if (myang != 0) {
              context.rotate((Math.PI * myang) / 180.0);
            }
}

</script>

</body>
</html>
