<html>
<head>
<title>Canvas HTML Element Rainbow 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>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Click to place top left of random rainbow rectangles and arcs</h1><br>
<canvas title='Click to place top left of random rainbow rectangles and arcs' id="canvaselement" width="900" height="500" style="border: 1px solid green;" />
<script language="JavaScript">
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 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({
colour: thiscol,
width: wdt,
height: hgt,
top: y,
left: x
});
// Collision detection between clicked offset and element.
elements.forEach(function(element) {
var grdt=context.createLinearGradient(0, 0,element.width/4, element.height/4);
var rgrdt=context.createRadialGradient(element.left, element.top,element.width,element.left + element.width,element.top + element.height,element.height);
// Create gradient
grdt.addColorStop(0,"black");
grdt.addColorStop("0.3","magenta");
grdt.addColorStop("0.5","blue");
grdt.addColorStop("0.6","green");
grdt.addColorStop("0.8","yellow");
grdt.addColorStop(1,"red");
rgrdt.addColorStop(0,"black");
rgrdt.addColorStop("0.3","magenta");
rgrdt.addColorStop("0.5","blue");
rgrdt.addColorStop("0.6","green");
rgrdt.addColorStop("0.8","yellow");
rgrdt.addColorStop(1,"red");
// Fill with gradient
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);
} else if (mode != 0) {
context.fillStyle = rgrdt;
context.fillRect(element.left, element.top, element.width, element.height);
} else {
context.beginPath();
context.strokeStyle = rgrdt;
context.fillStyle = rgrdt;
context.arc(element.left, element.top, element.width, element.height, (0.1 * twenty)*Math.PI);
if (amode > 0) {
context.stroke();
} else {
context.fill();
}
}
});
}, false);
</script>
</body>
</html>