Using canvas and onforminput

I have used the HTML5 canvas element to create a couple of patterns using circles: http://gandalf458.co.uk/canvas-circle.htm and http://gandalf458.co.uk/canvas-circle2.htm and they work fine. I then thought I would try to combine them and use onforminput so that I can select which pattern to display using radio buttons. I know this only works in Opera at the moment but my attempt http://gandalf458.co.uk/canvas-circle3.htm isn’t working. Can anyone help me with whatever is missing please…

Thanks G :slight_smile:

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!

Cheers G :slight_smile:

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>

<body onload=“init()”>

<form name=“form1”>
<p>just circles
<input name=“pattern” type=“radio” onclick=“getChecked()” value=“circles”>  
flowers of life
<input name=“pattern” type=“radio” onclick=“getChecked()” value=“flowers”> </p>
</form>
<canvas height=“420” width=“600”></canvas>

</body>

</html>