Draws a geometric shape using HTML canvas and JS.

sketch.js

// import 'math.min.js';

const pi = Math.PI;

function rotation(angle) {
    return [
        [Math.cos(angle), -Math.sin(angle)],
        [Math.sin(angle), Math.cos(angle)]
    ];
}

function round(array) {
    const arr = [];
    for (const x of array) {
        arr.push(Math.round(x));
    }
    return arr;
}

const pink = '#f50093';
const purple = '#a34487';
const blue = '#2c3397';
const red = '#e61a1d';
const yellow = '#ffc808';
const orange = '#f0852d';
const green = '#01a952';

/**
 * Draws a shape looking something like
 * -------
 *   / \
 *  /   \
 * in that rotation. Positive angles rotate clockwise.
 * @param {CanvasRenderingContext2D} context 
 * @param {Array} origin 
 * @param {number} angle
 */
function pathHexPart(context, origin, angle, skipLast) {
    const baseLength = hexPartLength;
    const baseVector = [baseLength, 0];
    
    
    // context.strokeStyle = 'black';
    

    for (let i = 0; i < 4; i++) {
        if (skipLast && i === 3) continue;
        subAngle = i*pi/3;
        const shift = math.multiply(rotation(angle+subAngle), baseVector);
        context.moveTo(...round(origin));
        context.lineTo(...round(math.add(origin, shift)));
    }
    context.stroke();
}

const hexagonColourArray = [orange, green, purple, pink, red, yellow, blue];
/**
 * 
 * @param {CanvasRenderingContext2D} context 
 * @param {*} origin 
 * @param {*} spacing 
 */
function drawHexagon(context, origin, spacing, colourArray) {
    const globalRotation = pi/6;
    const g = globalRotation;

    const baseVector = [spacing, 0];
    for (let i = 0; i < 6; i++) {
        const angle = i * pi/3 + g;
        const shift = math.multiply(rotation(angle), baseVector);
        context.beginPath();
        context.strokeStyle = colourArray[i];
        pathHexPart(context, round(math.add(origin, shift)), pi/2+angle);
        context.closePath();
    }

    context.beginPath();
    context.strokeStyle = hexagonColourArray[hexagonColourArray.length-1];
    pathHexPart(context, origin, pi/2 + g, true);
    pathHexPart(context, origin, -pi/2 + g, true);
    context.closePath();
}

const lineWidth = 16;
const circleWidth = 6;
const hexPartLength = 165;
const spacing = 330;
const circleRadius = 495;

(function() {
    const canvas = document.getElementsByTagName('canvas')[0];

    const context = canvas.getContext('2d');
    context.lineWidth = lineWidth;
    context.lineCap = 'round';
    // drawHexPart(context, [500, 500], pi/10);
    const greyArray = Array(6).fill('#eeeeee');
    // drawOuterParts(context, [502, 501], 310, greyArray);
    drawHexagon(context, [500, 500], spacing, hexagonColourArray);

    context.beginPath();
    context.strokeStyle = 'black';
    context.lineWidth = circleWidth;
    // context.moveTo(500, 500);
    context.arc(500, 500, circleRadius, 0, 2*pi);
    context.stroke();
    context.closePath();

    const button = document.getElementById('download');
    const link = document.getElementById('download-link');
    button.addEventListener('click', () => {
        console.log("Rendering.");
        canvas.toBlob(blob => {
            console.log("Finished.");
            saveAs(blob, 'canvas.png');
        }, 'image/png')
    });
    
})();