Skip to content

Instantly share code, notes, and snippets.

@kuharan

kuharan/converter.js

Last active January 18, 2019 06:46
Show Gist options
  • Save kuharan/939c6e90299810592a9c23be9a23a4e8 to your computer and use it in GitHub Desktop.
Save kuharan/939c6e90299810592a9c23be9a23a4e8 to your computer and use it in GitHub Desktop.
Download ZIP
Draw dynamic Canvas with Js
Raw
converter.js
function hexToRgb(hex) {
r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (r) {
return r.slice(1, 4).map(function(x) {
return parseInt(x, 16);
});
}
return null;
}
function hexToCMYK(hex) {
var computedC = 0;
var computedM = 0;
var computedY = 0;
var computedK = 0;
hex = (hex.charAt(0) == "#") ? hex.substring(1, 7) : hex;
if (hex.length != 6) {
alert('Invalid length of the input hex value!');
return;
}
if (/[0-9a-f]{6}/i.test(hex) != true) {
alert('Invalid digits in the input hex value!');
return;
}
var r = parseInt(hex.substring(0, 2), 16);
var g = parseInt(hex.substring(2, 4), 16);
var b = parseInt(hex.substring(4, 6), 16);
// BLACK
if (r == 0 && g == 0 && b == 0) {
computedK = 1;
return [0, 0, 0, 1];
}
computedC = 1 - (r / 255);
computedM = 1 - (g / 255);
computedY = 1 - (b / 255);
var minCMY = Math.min(computedC, Math.min(computedM, computedY));
computedC = round((computedC - minCMY) * 100 / (1 - minCMY));
computedM = round((computedM - minCMY) * 100 / (1 - minCMY));
computedY = round((computedY - minCMY) * 100 / (1 - minCMY));
computedK = round(minCMY * 100);
return [computedC, computedM, computedY, computedK].join();
}
function round(value) {
return Number(Math.round(value + 'e' + 3) + 'e-' + 3);
}
Raw
viz-elements.js
var colorDict = {
0: '#50BFE6',
1: '#FE6F5E',
2: '#FFCC33',
3: '#3AA655'
};
var textDict = {
0: 'One',
1: 'Hot',
2: 'Encoder',
3: 'Explained'
};
var c = document.getElementById("MainCanvas");
var ctx = c.getContext("2d");
function loadElements(boxShadowblur, boxShadowColor, startX) {
var boxCount;
for (boxCount = 0; boxCount < 4; boxCount++) {
loadBox(boxCount, boxShadowblur, boxShadowColor, startX);
posX = startX + 10;
writeTextLine(boxCount, posX);
startX += 270;
}
}
function loadBox(boxCount, boxShadowblur, boxShadowColor, startX) {
ctx.shadowBlur = boxShadowblur;
ctx.shadowOffsetX = 5;
ctx.shadowColor = boxShadowColor;
ctx.fillStyle = getFillColor(boxCount);
ctx.fillRect(startX, 20, 250, 400);
}
function getFillColor(boxCount) {
return colorDict[boxCount];
}
function writeTextLine(boxCount, posX) {
setTextLineProperties();
ctx.fillText(getTextLine(boxCount), posX, 340);
setSubTextProperties();
ctx.fillText(getSubTextLine1(boxCount), posX, 360);
ctx.fillText(getSubTextLine2(boxCount), posX, 375);
ctx.fillText(getSubTextLine3(boxCount), posX, 390);
}
function setTextLineProperties() {
ctx.fillStyle = "#F2EBF0";
ctx.shadowOffsetX = 1;
ctx.font = "40px Courier";
ctx.shadowColor = "Black";
ctx.shadowBlur = 1;
}
function setSubTextProperties() {
ctx.fillStyle = "#F2EBF0";
ctx.shadowColor = "Grey";
ctx.shadowOffsetX = 0;
ctx.font = "15px Helvetica";
}
function getTextLine(boxCount) {
return textDict[boxCount];
}
function getSubTextLine1(boxCount) {
return "HEX: " + colorDict[boxCount];
}
function getSubTextLine2(boxCount) {
return "RGB: " + hexToRgb(colorDict[boxCount]);
}
function getSubTextLine3(boxCount) {
return "CMYK: " + hexToCMYK(colorDict[boxCount]);
}
document.getElementById("MainCanvas").innerHTML = loadElements(10, "grey", 20, 20, 220, 400);
Raw
viz.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<canvas id="MainCanvas" width=1500 height=1000 style="border:1px solid #d3d3d3;"></canvas>
<script src="viz-elements.js">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment