JSFiddle - React, Tailwind, and code Playground

by beewayne

HTML

<canvas id="canvas" width="172" height="99"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
createSubjectArrow(ctx);

function createSubjectArrow(ctx) {
		var propertyType = 'Subject';
		var index = 1;
		var color = getColorForPropertyType(propertyType);
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(90, 33);
    ctx.lineTo(60, 1);
    ctx.lineTo(60, 15);
    ctx.lineTo(1, 15);
    ctx.lineTo(1, 50);
    ctx.lineTo(60, 50);
    ctx.lineTo(60, 65);
    ctx.lineTo(90, 33);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
    // draw the text
    ctx.font = getFontSizeForPropertyType(propertyType) + 'px Calibri';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.fillText(getTextForPropertyType(propertyType, index), 30, 36);
    ctx.stroke();
    ctx.restore();
}

function getTextForPropertyType(propertyType, index) {
    if (propertyType.toLowerCase() === 'comparable') {
        return 'Sale ' + index;
    } else if (propertyType.toLowerCase() === 'subject') {
        return 'Subject';
    } else {
        return propertyType;
    }
}

function getColorForPropertyType(propertyType) {
    if (propertyType.toLowerCase() === 'subject') {
        return 'red';
    } else if (propertyType.toLowerCase() === 'rental') {
        return 'green';
    } else if (propertyType.toLowerCase() === 'listing') {
        return 'brown';
    } else {
        return 'blue';
    }
}

function getFontSizeForPropertyType(propertyType) {
    if (propertyType.toLowerCase() === 'subject') {
        return '15';
    } else if (propertyType.toLowerCase() === 'rental') {
        return '15';
    } else {
        return '15';
    }
}