Lo que pasa es que getElementsByTagName es una colección y hay que acceder a sus miembros por índice.
Te dejo un ejemplo:
Código PHP:
<?php
if(isset($_POST['button'])){
echo '<pre>';
print_r($_POST);
echo '</pre>';
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
function cuadrado(l,col,p){
var c=document.createElement('canvas');
var ctx=c.getContext('2d');
ctx.fillStyle="rgba("+col+")";
ctx.fillRect(0,0,l,l);
p.appendChild(c);
}
function guardar(){
var cs=document.getElementsByTagName('canvas'),length=cs.length,i=0,fragment=document.createDocumentFragment(),input;
for(;i<length;i++){
input=document.createElement('input');
input.type='hidden';
input.name='image_'+i;
input.value=cs[i].toDataURL();
fragment.appendChild(input);
}
document.getElementById('f').appendChild(fragment);
return true;
}
onload=function(){
//dibujar
cuadrado(50,'255,0,0,1',document.body);
cuadrado(50,'0,0,255,1',document.body);
cuadrado(50,'255,0,0,.5',document.body);
}
</script>
</head>
<body>
<form id="f" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" onsubmit="return guardar()">
<input type="submit" name="button" id="button" value="guardar" />
</form>
</body>
</html>