<html>
<base/>
<body style="margin: 0;padding: 0">
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
var img = new Image();
img.src = "/content/c0027ba0b10ea78d4b8ec4ffbc7da4aa10850e0af3584e21ce2fa5720bbdf661i0";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
var devicePixelRatio = window.devicePixelRatio || 1;
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
canvas.width = canvas.width * devicePixelRatio;
canvas.height = canvas.height * devicePixelRatio;
ctx.scale(devicePixelRatio, devicePixelRatio);
var ratio = Math.min(canvas.width, canvas.height) / 2500;
var padding = 20 * ratio;
var dotSize = 15 * ratio;
var dotAndTextPadding = 30 * ratio;
var pillPadding = 30 * ratio;
var fontSize = 50 * ratio;
var tokinalData = JSON.parse('\{"imgID"\:"c0027ba0b10ea78d4b8ec4ffbc7da4aa10850e0af3584e21ce2fa5720bbdf661i0","p"\:"Tokinals","v"\:"1","op"\:"issue","name"\:"Family","tid"\:"1","exp"\:""\}');
var expiryDate = new Date(tokinalData.exp);
var currentDate = new Date();
var status = 'VALID';
var statusColor = 'green';
if (currentDate >= expiryDate) {
status = 'EXPIRED';
statusColor = 'red';
}
var scale = img.width / 2500;
padding = 20 * scale;
dotSize = 15 * scale;
dotAndTextPadding = 30 * scale;
pillPadding = 30 * scale;
fontSize = 50 * scale;
ctx.drawImage(img, 0, 0, img.width, img.height);
function drawPillLabel(text, color, x, y) {
ctx.font = fontSize + 'px Arial';
var textWidth = ctx.measureText(text).width;
var pillWidth = textWidth + 2 * dotAndTextPadding + 2 * pillPadding;
var pillHeight = fontSize + 2 * pillPadding;
var cornerRadius = pillHeight / 2;
ctx.shadowColor = '#999';
ctx.shadowBlur = 20;
ctx.beginPath();
ctx.moveTo(x + cornerRadius, y);
ctx.lineTo(x + pillWidth - cornerRadius, y);
ctx.arcTo(x + pillWidth, y, x + pillWidth, y + cornerRadius, cornerRadius);
ctx.lineTo(x + pillWidth, y + pillHeight - cornerRadius);
ctx.arcTo(x + pillWidth, y + pillHeight, x + pillWidth - cornerRadius, y + pillHeight, cornerRadius);
ctx.lineTo(x + cornerRadius, y + pillHeight);
ctx.arcTo(x, y + pillHeight, x, y + pillHeight - cornerRadius, cornerRadius);
ctx.lineTo(x, y + cornerRadius);
ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius);
ctx.closePath();
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fill();
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
ctx.beginPath();
ctx.arc(x + pillPadding + dotSize, y + pillHeight / 2, dotSize, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
ctx.font = fontSize + 'px Arial';
ctx.fillStyle = color;
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillText(text, x + pillPadding + 2 * dotSize + dotAndTextPadding, y + pillHeight / 2);
}
drawPillLabel(status, statusColor, padding, padding);
var tidTextWidth = ctx.measureText(tokinalData.tid).width;
var tidPillWidth = tidTextWidth + 2 * dotAndTextPadding + 2 * pillPadding;
drawPillLabel(tokinalData.tid, 'black', canvas.width / devicePixelRatio - tidPillWidth - padding, padding);
};
</script>
</body>
</html>