Javascript画布交互式图表 - 如何使我的代码更短

Question

我正在尝试自学javascript和HTML5，（刚刚开始），对于一些练习用canvas，我试图将this chart变成画布上的交互式图表，点击一个单词打开一些下面的树，等等。我不能发布它的图像，因为我太新了，抱歉。

问题是，我所做的代码都是按照我想要的方式工作（耶！），但它已经很长了，并且映射了图表的其余部分（我只完成了它的一小部分）到目前为止，这将是javascript中的战争与和平。所以我想知道是否有人可以查看我的代码并告诉我如何让它更简洁？

我用谷歌搜索了一下，用javascript看了我的书，没有任何东西跳出来。我也将尝试用SVG进行练习，并怀疑它可能更有效，但是因为我特别想学习javascript + canvas我真的想让这种方式运行良好。提前感谢您的帮助。

这是我的代码：

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);
}