function drawArrow(robot, mainAngleDeg, secAngleDeg) {
    var lineWidth = 16;
    var stemWidth = 64;

    var arrowWidth = 128+64;
    var arrowHeight = 128;
    var innerArena = Math.floor(CANVAS_SIZE/2 - 32);
    var mainLength = Math.floor(innerArena/1.8);
    var secondaryLength = innerArena - mainLength - 16;

    var halfStemWidth = Math.floor(stemWidth/2);
    var halfArrowWidth = Math.floor(arrowWidth/2);
    var rivetRadius = halfStemWidth * 0.6;

    arena.ctx.fillStyle = (robot == 1) ? rgb(COLORS.arrowFillP1) : rgb(COLORS.arrowFillP2);
    arena.ctx.strokeStyle = rgb(COLORS.arrowBorder);
    arena.ctx.lineWidth = lineWidth;

    // main arrow stem
    arena.ctx.save();
    arena.ctx.rotate(Math.PI/180 * mainAngleDeg);
    arena.ctx.beginPath();
    arena.ctx.rect(-halfStemWidth, -halfStemWidth, mainLength + halfStemWidth, stemWidth);
    arena.ctx.stroke();
    arena.ctx.fill();
    arena.ctx.closePath();

    _drawRivet(0, 0, rivetRadius);

    arena.ctx.translate(mainLength, 0);
    arena.ctx.rotate(Math.PI/180 * secAngleDeg);
    arena.ctx.beginPath();
    var secondArrowVertices = [
            [-halfStemWidth, -halfStemWidth],
            [secondaryLength - arrowHeight, -halfStemWidth],
            [secondaryLength - arrowHeight, -halfArrowWidth],
            [secondaryLength, 0],
            [secondaryLength - arrowHeight, +halfArrowWidth],
            [secondaryLength - arrowHeight, +halfStemWidth],
            [-halfStemWidth, +halfStemWidth],
            [-halfStemWidth, -halfStemWidth]
    ];
    arena.ctx.moveTo(secondArrowVertices[0][0], secondArrowVertices[0][1]);
    for(var i = 1; i < secondArrowVertices.length; ++i) {
        arena.ctx.lineTo(secondArrowVertices[i][0], secondArrowVertices[i][1]);
    }
    arena.ctx.stroke();
    arena.ctx.fill();
    arena.ctx.closePath();

    _drawRivet(0, 0, rivetRadius);
    arena.ctx.restore();
}
/**
 * Angles are left-hand coordinates (positive = clockwise).
 *
 * @param {Number} robot Robot number (1 or 2).
 * @param mainAngleDeg Primary stem angle, in degrees clockwise from horizontal-right.
 * @param secAngleDeg Secondary stem angle, in degrees clockwise from primary stem angle.
 */
Angles are left-hand coordinates (positive = clockwise).
@param {Number} robot Robot number (1 or 2).
@param mainAngleDeg Primary stem angle, in degrees clockwise from horizontal-right.
@param secAngleDeg Secondary stem angle, in degrees clockwise from primary stem angle.
Angles are left - hand coordinates ( positive = clockwise ) . @param { Number } robot Robot number ( 1 or 2 ) . @param mainAngleDeg Primary stem angle in degrees clockwise from horizontal - right . @param secAngleDeg Secondary stem angle in degrees clockwise from primary stem angle .
function drawArrow(robot, mainAngleDeg, secAngleDeg) {
    var lineWidth = 16;
    var stemWidth = 64;
    var arrowWidth = 128+64;
    var arrowHeight = 128;
    var innerArena = Math.floor(CANVAS_SIZE/2 - 32);
    var mainLength = Math.floor(innerArena/1.8);
    var secondaryLength = innerArena - mainLength - 16;
    var halfStemWidth = Math.floor(stemWidth/2);
    var halfArrowWidth = Math.floor(arrowWidth/2);
    var rivetRadius = halfStemWidth * 0.6;
    arena.ctx.fillStyle = (robot == 1) ? rgb(COLORS.arrowFillP1) : rgb(COLORS.arrowFillP2);
    arena.ctx.strokeStyle = rgb(COLORS.arrowBorder);
    arena.ctx.lineWidth = lineWidth;
    arena.ctx.save();
    arena.ctx.rotate(Math.PI/180 * mainAngleDeg);
    arena.ctx.beginPath();
    arena.ctx.rect(-halfStemWidth, -halfStemWidth, mainLength + halfStemWidth, stemWidth);
    arena.ctx.stroke();
    arena.ctx.fill();
    arena.ctx.closePath();
    _drawRivet(0, 0, rivetRadius);
    arena.ctx.translate(mainLength, 0);
    arena.ctx.rotate(Math.PI/180 * secAngleDeg);
    arena.ctx.beginPath();
    var secondArrowVertices = [
            [-halfStemWidth, -halfStemWidth],
            [secondaryLength - arrowHeight, -halfStemWidth],
            [secondaryLength - arrowHeight, -halfArrowWidth],
            [secondaryLength, 0],
            [secondaryLength - arrowHeight, +halfArrowWidth],
            [secondaryLength - arrowHeight, +halfStemWidth],
            [-halfStemWidth, +halfStemWidth],
            [-halfStemWidth, -halfStemWidth]
    ];
    arena.ctx.moveTo(secondArrowVertices[0][0], secondArrowVertices[0][1]);
    for(var i = 1; i < secondArrowVertices.length; ++i) {
        arena.ctx.lineTo(secondArrowVertices[i][0], secondArrowVertices[i][1]);
    }
    arena.ctx.stroke();
    arena.ctx.fill();
    arena.ctx.closePath();
    _drawRivet(0, 0, rivetRadius);
    arena.ctx.restore();
}
function drawArrow ( robot , mainAngleDeg , secAngleDeg ) { var lineWidth = 16 ; var stemWidth = 64 ; var arrowWidth = 128 + 64 ; var arrowHeight = 128 ; var innerArena = Math . floor ( CANVAS_SIZE / 2 - 32 ) ; var mainLength = Math . floor ( innerArena / 1.8 ) ; var secondaryLength = innerArena - mainLength - 16 ; var halfStemWidth = Math . floor ( stemWidth / 2 ) ; var halfArrowWidth = Math . floor ( arrowWidth / 2 ) ; var rivetRadius = halfStemWidth * 0.6 ; arena . ctx . fillStyle = ( robot == 1 ) ? rgb ( COLORS . arrowFillP1 ) : rgb ( COLORS . arrowFillP2 ) ; arena . ctx . strokeStyle = rgb ( COLORS . arrowBorder ) ; arena . ctx . lineWidth = lineWidth ; arena . ctx . save ( ) ; arena . ctx . rotate ( Math . PI / 180 * mainAngleDeg ) ; arena . ctx . beginPath ( ) ; arena . ctx . rect ( - halfStemWidth , - halfStemWidth , mainLength + halfStemWidth , stemWidth ) ; arena . ctx . stroke ( ) ; arena . ctx . fill ( ) ; arena . ctx . closePath ( ) ; _drawRivet ( 0 , 0 , rivetRadius ) ; arena . ctx . translate ( mainLength , 0 ) ; arena . ctx . rotate ( Math . PI / 180 * secAngleDeg ) ; arena . ctx . beginPath ( ) ; var secondArrowVertices = [ [ - halfStemWidth , - halfStemWidth ] , [ secondaryLength - arrowHeight , - halfStemWidth ] , [ secondaryLength - arrowHeight , - halfArrowWidth ] , [ secondaryLength , 0 ] , [ secondaryLength - arrowHeight , + halfArrowWidth ] , [ secondaryLength - arrowHeight , + halfStemWidth ] , [ - halfStemWidth , + halfStemWidth ] , [ - halfStemWidth , - halfStemWidth ] ] ; arena . ctx . moveTo ( secondArrowVertices [ 0 ] [ 0 ] , secondArrowVertices [ 0 ] [ 1 ] ) ; for ( var i = 1 ; i < secondArrowVertices . length ; ++ i ) { arena . ctx . lineTo ( secondArrowVertices [ i ] [ 0 ] , secondArrowVertices [ i ] [ 1 ] ) ; } arena . ctx . stroke ( ) ; arena . ctx . fill ( ) ; arena . ctx . closePath ( ) ; _drawRivet ( 0 , 0 , rivetRadius ) ; arena . ctx . restore ( ) ; }
Angles are left-hand coordinates (positive = clockwise).
Angles are left - hand coordinates ( positive = clockwise ) .
// main arrow stem