Question

I’m looking for an easier way to repeat this process and make it so I don’t have to go through each part individually. Maybe I should store the parts in an object, and tell which other part it connects to.

I guess my question would have to be:
What would an easy way to make a skeletal system be?

var drawPlayer = function() {
    ctx.strokeStyle = '#FFF';
    ctx.lineWidth = 3;
    ctx.beginPath();
    //body
    var temp = p2c(player.bodyLength/2, player.body);
    ctx.moveTo(player.pos.x + temp[0], player.pos.y - temp[1]);
    ctx.lineTo(player.pos.x - temp[0], player.pos.y + temp[1]);
    var humorusAnchor = [player.pos.x + temp[0], player.pos.y - temp[1]];
    var thighAnchor = [player.pos.x - temp[0], player.pos.y + temp[1]];
    //left humorus
    var temp = p2c(player.arms.humorusLength, player.arms.leftHumorus);
    ctx.moveTo(humorusAnchor[0], humorusAnchor[1]);
    ctx.lineTo(humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]);
    var leftForearmAnchor = [humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]];
    //right humorus
    var temp = p2c(player.arms.humorusLength, player.arms.rightHumorus);
    ctx.moveTo(humorusAnchor[0], humorusAnchor[1]);
    ctx.lineTo(humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]);
    var rightForearmAnchor = [humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]];
    //left forearm
    var temp = p2c(player.arms.forearmLength, player.arms.leftForearm);
    ctx.moveTo(leftForearmAnchor[0], leftForearmAnchor[1]);
    ctx.lineTo(leftForearmAnchor[0] - temp[0], leftForearmAnchor[1] + temp[1]);
    //right forearm
    var temp = p2c(player.arms.forearmLength, player.arms.rightForearm);
    ctx.moveTo(rightForearmAnchor[0], rightForearmAnchor[1]);
    ctx.lineTo(rightForearmAnchor[0] - temp[0], rightForearmAnchor[1] + temp[1]);
    //left thigh
    var temp = p2c(player.legs.thighLength, player.legs.leftThigh);
    ctx.moveTo(thighAnchor[0], thighAnchor[1]);
    ctx.lineTo(thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]);
    var leftCalveAnchor = [thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]];
    //right thigh
    var temp = p2c(player.legs.thighLength, player.legs.rightThigh);
    ctx.moveTo(thighAnchor[0], thighAnchor[1]);
    ctx.lineTo(thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]);
    var rightCalveAnchor = [thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]];
    //left calve
    var temp = p2c(player.legs.calveLength, player.legs.leftCalve);
    ctx.moveTo(leftCalveAnchor[0], leftCalveAnchor[1]);
    ctx.lineTo(leftCalveAnchor[0] - temp[0], leftCalveAnchor[1] + temp[1]);
    //right calve
    var temp = p2c(player.legs.calveLength, player.legs.rightCalve);
    ctx.moveTo(rightCalveAnchor[0], rightCalveAnchor[1]);
    ctx.lineTo(rightCalveAnchor[0] - temp[0], rightCalveAnchor[1] + temp[1]);
    ctx.stroke();
};

Answer 1

Basically you will have an array of joints or bones like so

class Bone {
    Bone parent;
    Vector tail; // Translation from the parent node's tail
    public:
        Bone(Vector tail, Bone parent);
};

Then you have the body defined like so

Bone bones[] = /* Array sizing */
Bone root = Bone(Vector(0,0), null); // I think this is called the rhomboid, Not sure, area between the shoulders
Bone leftShoulder = Bone(Vector(-10,0), root);
Bone rightShoulder= Bone(Vector(10,0), root);
Bone leftElbow = Bone(Vector(-10, 0), leftShoulder);
Bone rightElbow = Bone(Vector(10,0), rightShoulder);
// and so on...
bones = [root, leftShoulder, rightShoulder, ...];

And then to draw it, you would do this:

foreach(bone in bones){
    Vector offset = bone.tail;
    Bone p = bone.parent;
    while(p.parent != null){ p = p.parent;offset+=bone.tail; }
    Vector parentOffset = offset - bone.tail;
    drawBone(offset, parentOffset);
}