it seems like a function to draw those round canvases may be preferable to copy/pasting the same code 3 times changing only a couple of words, e.g.
[php]
<script type="text/javascript">
function makeButton(canvasId, buttonText)
{
var c=document.getElementById(canvasId);
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText(buttonText, 100, 110);
}
makeButton("thisCanvas", "Music")
makeButton("secondCanvas", "Writing")
makeButton("thirdCanvas", "Web")
</script>
[/php]
untested and edited straight in the 2p2 edit box so use at your own risk!
also good idea to try and be consistent when naming things, thisCanvas -> secondCanvas -> thirdCanvas =
Last edited by _dave_; 04-27-2011 at 08:06 PM.
Reason: indentation nit