JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<canvas></canvas>
Quality <input type="text" value="1" />
<button>Draw</button>

CSS

canvas {
    width:300px;
    height:300px;
    border:solid 1px black;
}

JavaScript

;
(function () {
    var $ = document.querySelectorAll.bind(document),
        draw = function () {
            var canvas = $('canvas')[0],
                context = canvas.getContext('2d'),
                rectWidth = 100;

            var scale = $('input')[0].value;
            canvas.width = canvas.height = 300 * scale;
            context.scale(scale, scale);
            for (var degree = 0; degree < 360; degree++) {
                context.save();
                context.translate(150, 150);
                context.rotate(degree);
                context.strokeStyle  ='black';
                context.translate(-150, -150);
                context.fillRect(100, 100, 100, 100);
                context.restore();
            }
            //context.restore();
        }

    $('button')[0].addEventListener('click', draw);


})();