JSFiddle - React, Tailwind, and code Playground

by nhuon

HTML

<script src="http://stuk.github.io/jszip/jszip.js"></script>
Number of pins: <input id="numpins" type="text">
<a class="button" id="generate">Generate</a>
<div id="container"></div>
<br>
Image file name: <input id="filename" type="text">
<a class="button" id="download">Download</a>
<img id="pin-image"...

CSS

.button {
    border-radius: 3px;
    border: 1px solid #DDD;
    padding: 5px;
    background: #EEE;
}

JavaScript

function CreateMarkerImage(number, image) {

    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    if (image === undefined) {
        var radius = 25;
        var border_thickness = 2;
        var image_size = radius + border_thickness + 1;
        var half_image_size = image_size / 2;
        var half_radius = radius / 2;
        canvas.width = image_size;
        canvas.height = image_size;
        context.beginPath();
        context.arc(half_image_size, half_image_size, half_radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = border_thickness;
        context.strokeStyle = '#003300';
        context.stroke();
    } else {
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);
    }

    if (number !== undefined) {
        var startX, startY, font_size;
        if (number > 99) {
            startX = 6;
            startY = 13;
            font_size = '7px';
        } else if (number > 9) {
            startX = 7;
            startY = 13;
            font_size = '9px';
        } else {
            startX = 9;
            startY = 13;
            font_size = '11px';
        }
        context.font = font_size + " Helvetica";
        context.fillStyle = 'white';
        context.fillText(number.toString(), startX, startY);
    }
    return canvas.toDataURL();
}

function GetPinCount() {
    var count = parseInt($('#numpins').val());
    if (isNaN(count)) {
        return 10;
    } else {
        return count;
    }
}

$(document).ready(function () {
    $('#generate').click(function () {
        $('#container').empty();
        var count = GetPinCount();
        for (var i = 0; i < count; i++) {
            $('#container').append($('<img>').attr('src', CreateMarkerImage(i, document.getElementById("pin-image"))));
            $('#container').append(' ');
        }
    });
                       ...