JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<!-- many thanks to jQuery.com -->
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"
></script>
<!-- many thanks to http://www.createjs.com/getting-started/easeljs -->
<script type="text/javascript" src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script type="text/javascript">
var sa = {};
sa.logo = {
about : {
},
globals : {
},
settings : {
},
create : function (logoHTMLid) {
var eventData = {
eventType : 'resize',
element : logoHTMLid
};
jQuery(window).resize (eventData, sa.logo.resize);
var
w = sa.logo.settings.width = sa.logo.browserWidth(),
h = sa.logo.settings.height = sa.logo.browserHeight();
var stage = sa.logo.settings.stage = new createjs.Stage(logoHTMLid);
//stage.setBounds (0,0,w,h);
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 10);
sa.logo.settings.circle = circle;
stage.addChild(circle);
sa.logo.resize (eventData);
},
resize : function (resizeEventData) {
if (resizeEventData.data) resizeEventData = resizeEventData.data;
var
w = sa.logo.settings.width = sa.logo.browserWidth(),
h = sa.logo.settings.height = sa.logo.browserHeight(),
logoHTMLid = resizeEventData.element,
stage = sa.logo.settings.stage,
circle = sa.logo.settings.circle;
//jQuery('#'+logoHTMLid)[0].top = 5;
//jQuery('#'+logoHTMLid)[0].left = 5;
jQuery('#'+logoHTMLid)[0].parentNode.style.width = w-10 + 'px';
jQuery('#'+logoHTMLid)[0].parentNode.style.height = h-10 + 'px';
jQuery('#'+logoHTMLid)[0].width = w-10;
jQuery('#'+logoHTMLid)[0].height = h-10;
var x = parseInt((w / 2) - 20);
...