Javascript canvas interactive chart - how to make my code shorter

Canvas Query will be very helpful. Once you load it you will be able to chain methods as follows:

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

can be shortened to:

cq('#canvas');
cq().textAlign('center').font('bold 48px Arial').fillStyle('#F63').fillText"Fully Enlightened", 500, 350);

You have some other areas of improvement as well. First of all, your code will be easier to review if you fix up your indentation and make your function names more informative than BDS and q.

Now...you never call q in your code snippet, so it is unclear what event is the trigger...please post the full script if possible so it is more clear what you are trying to accomplish.

Anyway, you can abstract a lot of your code using the OnceAndOnlyOnce principle. Take for example that you initialize all three functions in a similar way:

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

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

despite the fact that the exact same code is contained in your BDS method. I'm not sure why you feel it is necessary to clear the canvas after each method is called... Anyway I would rename BDS to setup and just call it from inside the buddha, etc. functions if you feel this clearing of the canvas is necessary. Also you are caching variables you don't reuse. You could change the above to:

var text = ['Buddha', 'Dhamma', 'Sangha'].join('          '); // Whitespace not preserved...
cq().textAlign('center').font('bold 48px Arial').fillStyle('#F63').fillText(text, 500, 100);

Another abstraction you can make is that you do something similar to the following all over your code:

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

Abstract it!

function label(text, x, y, styleClass){
    if( typeof styleClass != 'undefined'){
        cq().textAlign(styleClass.textAlign)
            .font(styleClass.font)
            .fillStyle(styleClass.fillStyle);
        }
    cq().fillText(text, x, y);
}

This function can actually be further reduced to:

function label(text, x, y, styleClass){
    if( typeof styleClass != 'undefined'){
        cq().set(styleClass);
    }
    cq().fillText(text, x, y);
}

Now you can do:

var style1 = {font: "bold 40px Arial", textAlign: "center", fillStyle: "#0C0"};

setup();
function buddha() {
    cq().beginPath().moveTo(185, 120).lineTo(500, 250).strokeStyle("#FCF").lineWidth(5).stroke();

    label("Accomplished", 500, 300, style1);
    label("Fully Enlightened", 500, 350);
    label("Perfect in True Knowledge and Conduct", 500, 400);
    label("Sublime", 500, 450);
    label("Knower of Worlds", 500, 500);
    label("Incomparable Leader of Persons to be Tamed", 500, 550);
    label("Teacher of Gods and Humans", 500, 600);
    label("Blessed", 500, 650);
}

Note that you only need to pass in a style object if you are changing the style. You could perform a similar abstraction with your lines:

function edge(x1, y1, x2, y2, lineStyle){
    if (typeof lineStyle != 'undefined'){
        cq().set(lineStyle);
    }
    cq().beginPath().moveTo(x1, y1).lineTo(x2, y2).stroke();
}

lineStyle = {strokeStyle: "#FCF", lineWidth: 5};
edge(185, 120, 500, 250, lineStyle);

Now your complete code should look like:

onload = setup;

function setup() {
    cq('#canvas');
    var text = ['Buddha', 'Dhamma', 'Sangha'].join('          ');
    cq().textAlign('center').font('bold 48px Arial').fillStyle('#F63').fillText(text, 500, 100);
    buddha();
    dhamma();
    sangha();
}

function label(text, x, y, styleClass){
    if( typeof styleClass != 'undefined'){
        cq().textAlign(styleClass.textAlign)
            .font(styleClass.font)
            .fillStyle(styleClass.fillStyle);
        }
    cq().fillText(text, x, y);
}

function edge(x1, y1, x2, y2, lineStyle){
    if (typeof lineStyle != 'undefined'){
        cq().strokeStyle(lineStyle.strokeStyle)
            .lineWidth(lineStyle.lineWidth);
    }
    cq().beginPath().moveTo(x1, y1).lineTo(x2, y2).stroke();
}

var edgeStyle =  {strokeStyle: "#FCF", lineWidth: 5};
var labelStyles = {
    Buddha: {font: "bold 40px Arial", textAlign: "center", fillStyle: "#0C0"},
    Sangha: {font: "bold 36px Arial", textAlign: "right", fillStyle: "#FCF"},
    Dhamma: {font: "bold 40px Arial", textAlign: "center", fillStyle: "#0C0"}
};

function buddha() {
    edge(185, 120, 500, 250, edgeStyle);
    label("Accomplished", 500, 300, labelStyles.Buddha);
    label("Fully Enlightened", 500, 350);
    label("Perfect in True Knowledge and Conduct", 500, 400);
    label("Sublime", 500, 450);
    label("Knower of Worlds", 500, 500);
    label("Incomparable Leader of Persons to be Tamed", 500, 550);
    label("Teacher of Gods and Humans", 500, 600);
    label("Blessed", 500, 650);
}

function sangha(){
    edge(800, 120, 270, 250, edgeStyle);
    edge(840, 120, 680, 250);
    label("Monastic Sangha     ", 500, 300, labelStyles.Sangha);
    label("Nuns                ", 500, 350);
    label("Monks               ", 500, 400);
    label("Novice Nuns         ", 500, 450);
    label("     Noble Sangha", 500, 300);
    label("          Arahants", 500, 350);
    label("      Non-Returners", 500, 400);
    label("     Once-Returners", 500, 450);
    label("     Stream-Enterers", 500, 500);
}

function dhamma() {
    edge(500, 120, 235, 250, edgeStyle);
    edge(505, 120, 420, 250);
    edge(510, 120, 620, 250);
    edge(515, 120, 805, 250);
    label("Suffering    Origin    Cessation    Path", 500, 300);
}

You just trimmed your code from 231 lines down to 69!

I have this problem as well. I like to keep my code short and clean. If I don't, I usually end of abandoning a project because it gets too long and messy. What I do is condense actions that are carried out many times on the canvas.

Example:

// drawing a bunch of rectangles to canvas the old way.

canvas.save();
canvas.fillStyle = "red";
canvas.fillRect(50, 50, 100, 100);
canvas.restore();
canvas.save();
canvas.fillStyle = "blue";
canvas.fillRect(0, 0, 100, 100);
canvas.restore();
// etc....

//instead create a function for making simple rectangles

function drawRect(x, y, width, height, color) {
    canvas.save();
    canvas.fillStyle = color;
    canvas.fillRect(x, y, width, height);
    canvas.restore();
};

//now i can call this function whenever i need a rectangle
//also you can use rgb(red, green, blue) in place of named colors.

drawRect(0, 0, 50, 60, "yellow");
drawRect(50, 50, 100, 200, "red");
drawRect(0, 50, 200, 300, rgb(120, 40, 200));