JSFiddle - React, Tailwind, and code Playground

HTML

Size:
<input id="size" type="text" name="FirstName" value="50"> <b id="count">Total Count:</b>

<canvas />

JavaScript

var sizeField = document.getElementById("size");
            sizeField.onchange = function () {
                // Clear the entire canvas
                var can = document.querySelector('canvas');
                var ctx = can.getContext('2d');
                ctx.clearRect(0, 0, can.width, can.height);
                updateCanvas();
            };
            updateCanvas();

            function updateCanvas() {
                var can = document.querySelector('canvas');
                can.width = 1800;
                can.height = 900;
                var ctx = can.getContext('2d');
                svgImg = new Image();

                svgImg.onload = function () {
                    var sizeField = document.getElementById("size");
                    var size = sizeField.value * 1;
                    var timeBefore = new Date().getTime();
                    var tot = 0;

                    var canWidth = can.width;
                    var canHeight = can.height;
                    for (var x = 0; x < canWidth; x += size) {
                        for (var y = 0; y < canHeight; y += size) {
                            ctx.drawImage(svgImg, x, y, size, size);
                            tot++;
                        }
                    }
                    document.getElementById('count').innerHTML = "Total Count: " + tot;
                    var timeAfter = new Date().getTime();
                };
                svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg";
                svgImg.width = size;
                svgImg.height = size;

            }