Thanks Allan. That’s a great help. IE doesn’t yet understand most HTML5 elements. Seems a lot of HTML5 elements require JavaScript which is not my puppy!
The following script sorts out your radio button problems, but it doesn’t work in IE. Also, I am not familiar with the canvas app, so I was unable to clear the patterns between clicks on the radio buttons. You can reload the page to clear it, but I am sure there is a better way.
<!doctype html>
<html>
<head>
<meta charset=“utf-8” />
<title>Flowers of Life</title>
<script type=“text/javascript”>
<!–
var myForm; // global
function init(){ myForm=document.forms[“form1”]; } // shortcut
// ---------------------
var thisPattern // global
function getChecked()
{ for(var i=0;i<myForm.pattern.length;i++)
{ if(myForm.pattern[i].checked==true)
{ thisPattern=myForm.pattern[i].value; }
}
// write pattern to page
formInput();
}
// ----------------------
function formInput()
{var ctx = document.querySelector(‘canvas’).getContext(‘2d’);
// circle settings
ctx.strokeStyle = ‘#339’;
ctx.lineWidth = 1;
ctx.lineCap = ‘round’;
ctx.save();
var radius = 40;
if (thisPattern == “circles”)
{ // all circles
var startx = 0;
var starty = 0;
var incrx = 2 * radius;
var incry = Math.sqrt( 3radiusradius );
}
else if (thisPattern == “flowers”)
{ // flower of life
var startx = 0;
var starty = radius * .134;
var incrx = radius;
var incry = radius * .866;
}
//
for (var y = starty; y <= ctx.canvas.height; y += incry)
{if (thisPattern == “circles”)
{ // all circles
startx = radius - startx;
}
else if (thisPattern == “flowers”)
{ // flower of life
startx = radius/2 - startx;
}
//
for (var x = startx; x <= ctx.canvas.width; x += incrx)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.stroke();
}
}
}
//
// -------
var thisPattern // global
function getChecked()
{ document.getElementsByTagName(“canvas”).innerHTML=“aaaaa”;
for(var i=0;i<myForm.pattern.length;i++)
{ if(myForm.pattern[i].checked==true)
{ thisPattern=myForm.pattern[i].value; }
}
// write pattern to page
formInput();
}
//–>
</script>
<style type=“text/css”>
<!–
body { font: .83em verdana, arial, helvetica, sans-serif; margin: 20px; }
canvas { margin: 40px auto; display: block; border: 1px solid #ccc; }
–>
</style>
</head>