User:TheGhostOfInky/canvas-drawing.js

/** * @typedef TestParams */

/** @type */ var testParams = { "8values": { name: "", baseColors: ["#EEE", "#222"], size: [800, 650], images: [ ["/wiki/Special:FilePath/Inky-sprite.png", "/wiki/Special:FilePath/Inky-sprite.png"], ["/wiki/Special:FilePath/Inky-sprite.png", "/wiki/Special:FilePath/Inky-sprite.png"], ["/wiki/Special:FilePath/Inky-sprite.png", "/wiki/Special:FilePath/Inky-sprite.png"], ["/wiki/Special:FilePath/Inky-sprite.png", "/wiki/Special:FilePath/Inky-sprite.png"] ],       colors: [ ["#f44336", "#00897b"], ["#ff9800", "#03a9f4"], ["#ffeb3b", "#3f51b5"], ["#8bc34a", "#9c27b0"] ],       tiers: [ ["Communist", "Socialist", "Social", "Centrist", "Market", "Capitalist", "Laissez-Faire"], ["Cosmopolitan", "Internationalist", "Peaceful", "Balanced", "Patriotic", "Nationalist", "Chauvinist"], ["Anarchist", "Libertarian", "Liberal", "Moderate", "Statist", "Authoritarian", "Totalitarian"], ["Revolutionary", "Very Progressive", "Progressive", "Neutral", "Traditional", "Very Traditional", "Reactionary"] ]   } };

/** * @param {number} score * @param {string[]} tierList * @returns {string} */ function findtier(score, tierList) { if (score < 0 || score > 100 || isNaN(score)) { return "Invalid Score"; }   var tiers = [10, 25, 40, 60, 75, 90, 100]; for (var i = 0; i < tiers.length; i++) { var lb = tiers[i - 1] || 0; var ub = tiers[i]; if (score >= lb && score <= ub) { return tierList[i]; }   }    return "Invalid Score"; }

/** * @param {string|undefined} scores * @returns {number[]} */ function parseScores(scores) { if (!scores) return []; var splitScores = scores.split(",");

/** @type {number[]} */ var parsedScores = []; for (var i = 0; i < splitScores.length; i++) { parsedScores[i] = parseFloat(splitScores[i]); }   return parsedScores; }

/** * @param {CanvasRenderingContext2D} ctx * @param {string} imageUrl * @param {[x: number, y: number, w: number, h: number]} position */ function drawImage(ctx, imageUrl, position) { var image = document.createElement("img"); image.src = "/wiki/Special:FilePath/" + imageUrl; image.addEventListener("load", function {        ctx.drawImage(image, position[0], position[1], position[2], position[3]);    }); }

/** * @param {number[]} scores * @param {TestParams} params * @returns {HTMLCanvasElement} */ function createCanvas(scores, params) { var canvas = document.createElement("canvas"); canvas.width = params.size[0]; canvas.height = params.size[1];

var ctx = canvas.getContext("2d"); if (!ctx) return canvas;

ctx.fillStyle = params.baseColors[0]; ctx.fillRect(0, 0, params.size[0], params.size[1]);

for (var i = 0; i < params.images.length; i++) { var imgs = params.images[i]; var x = 170 + 120 * i;

drawImage(ctx, imgs[0], [20, x, 100, 100]); drawImage(ctx, imgs[2], [680, x, 100, 100]); }

for (var j = 0; j < params.colors.length; j++) { var h = 180 + 120 * j;       var w = 5.6 * scores[j]; var w2 = 5.6 * (100 - scores[j]);

ctx.fillStyle = params.baseColors[1]; ctx.fillRect(120, h, 560, 80);

ctx.fillStyle = params.colors[j][0]; ctx.fillRect(120, h + 4, w - 2, 72);

ctx.fillStyle = params.colors[j][1]; ctx.fillRect(682 - w2, h + 4, w2 - 2, 72); }

for (var k = 0; k < scores.length; k++) { var height = 237.5 * 120 * k;       var rev = 100 - scores[k]; ctx.fillStyle = params.baseColors[1];

if (rev < 70) { ctx.textAlign = "right"; ctx.fillText(scores[k].toFixed(1) + "%", 130, height); }

if (rev > 30) { ctx.textAlign = "left"; ctx.fillText(rev.toFixed(1) + "%", 670, height); }

var tier = findtier(scores[k], params.tiers[k]); ctx.textAlign = "center"; ctx.fillText(tier, 400, height - 62.5); }   return canvas; }

window.onload = function { /** @type {JQuery} */ $(".test-canvas").each(function {        var elm = $(this);        var scores = parseScores(elm.attr("scores"));        var test = elm.attr("test") || "not-defined";        var canvas = createCanvas(scores, testParams[test]);        elm.html(canvas);    }); };