I'm trying to teach myself javascript and HTML5, (just beginning), and for some practice with canvas I am trying to turn [this chart](http://www.stefan.gr/dhammachart-bigger.gif) into an interactive chart on canvas, whereby clicking on a word opens up some of the tree below, and so on. I can't post images of what it does as I'm too new here, sorry.

The thing is, the code I have done is all working as I want it to (yay!), but it's already pretty long, and to map the rest of the chart (I've only done a small part of it so far) it's going to be War and Peace in javascript. So I was wondering if anyone could take a look at my code and tell me how to make it briefer?

I've googled, and looked in my books on javascript, and nothing jumps out at me. I am also going to try and do it with SVG for practice with that, and suspect it may be more efficient, but as I specifically want to learn javascript+canvas I really want to get this way working well also. Thanks in advance for any help.

Edit to add: I tried putting functions inside functions e.g. calling BDS() where I wanted to write that out, rather than copying the code, but that simply caused it not to do any of the stuff after it.

Here is my code:

```
onload = BDS;
var called = false;

function BDS() {

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

}

function q(event) {
event = event || window.event;

var canvas = document.getElementById("canvas"),
x = event.pageX - canvas.offsetLeft,
y = event.pageY - canvas.offsetTop;

//alert(x + ' ' + y);
if (x < 295 && x > 120 && y > 60 && y < 110){
    called = false;
    buddha();
}

if (x < 600 && x > 400 && y > 60 && y < 110) {
    called = true;
    dhamma();   
}

if (x < 880 && x > 710 && y > 60 && y < 110) {
    called = false;
    sangha();
}

if (called === true && x < 330 && x > 140 && y > 260 && y <300) {
    alert("yay"); 
}

}

function buddha() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 750);

ctx.beginPath();
ctx.moveTo(185, 120);
ctx.lineTo(500, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Accomplished", 500, 300);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Fully Enlightened", 500, 350);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Perfect in True Knowledge and Conduct", 500, 400);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Sublime", 500, 450);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Knower of Worlds", 500, 500);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Incomparable Leader of Persons to be Tamed", 500, 550);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Teacher of Gods and Humans", 500, 600);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "center";
ctx.fillText("Blessed", 500, 650);
}

function sangha(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 750);

ctx.beginPath();
ctx.moveTo(800, 120);
ctx.lineTo(270, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(840, 120);
ctx.lineTo(680, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "right";
ctx.fillText("Monastic Sangha     ", 500, 300);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Nuns                ", 500, 350);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Monks               ", 500, 400);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Novice Nuns         ", 500, 450);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "right";
ctx.fillText("Novice Monks        ", 500, 500);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#0C0";
ctx.textAlign = "left";
ctx.fillText("     Noble Sangha", 500, 300);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("          Arahants", 500, 350);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("      Non-Returners", 500, 400);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("     Once-Returners", 500, 450);

ctx.font = "bold 36px Arial";
ctx.fillStyle = "#FCF";
ctx.textAlign = "left";
ctx.fillText("     Stream-Enterers", 500, 500);
}

function dhamma() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 1000, 750);

ctx.beginPath();
ctx.moveTo(500, 120);
ctx.lineTo(235, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(505, 120);
ctx.lineTo(420, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(510, 120);
ctx.lineTo(620, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.moveTo(515, 120);
ctx.lineTo(805, 250);
ctx.strokeStyle = "#FCF";
ctx.lineWidth = 5;
ctx.stroke();

ctx.font = "bold 48px Arial";
ctx.fillStyle = "#F63";
ctx.textAlign = "center";
var B = "Buddha          ";
var D = "Dhamma          ";
var S = "Sangha";
ctx.fillText(B     +     D      +    S, 500, 100);

ctx.font = "bold 40px Arial";
ctx.fillStyle = "#09F";
ctx.textAlign = "center";
ctx.fillText("Suffering    Origin    Cessation    Path", 500, 300);
}

```