JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<script src="http://www.iqandreas.com/temp/positioning-items-around-a-circle/canvas-helper.js"></script>
<script src="http://www.iqandreas.com/temp/positioning-items-around-a-circle/MouseEvent.js"></script>
<div class="tutorial-example">
	<canvas class="ufo-demo" id="ufo-demo-radianAngle" width="500" height="600">
		If you can see this message, your browser does not support canvas, and needs an upate. Sorry. :(
	</canvas>
</div>

CSS

.ufo-demo {
    padding: 10px;
    width: 500px;
    height: 600px;
    
    background: url(http://www.iqandreas.com/temp/positioning-items-around-a-circle/space-background.png);
}

JavaScript

//var imgSpaceBackground = new ImageAsset('space-background.png');
var imgEarth = new ImageAsset('http://www.iqandreas.com/temp/positioning-items-around-a-circle/earth.png', 100, 100);
var imgSpaceStation = new ImageAsset('http://www.iqandreas.com/temp/positioning-items-around-a-circle/spacestation.png', 64, 64);

//document.addEventListener('DOMContentLoaded', firstDraw);
document.addEventListener('click', firstDraw);
function firstDraw()
{
	console.log("click");
	imgEarth.center();
	imgSpaceStation.center();
	
    var drawingWidth = 500;
    var drawingHeight = 500;
	var centerX = drawingWidth / 2;
	var centerY = drawingHeight / 2;
	var radius = 150;
	
	var demos = document.querySelectorAll(".ufo-demo");
	for (var i = 0; i < demos.length; i++) {
		var context = demos[i].getContext("2d");
		//imgSpaceBackground.draw(context, 0, 0);
		imgEarth.draw(context, centerX, centerY);
		
		var radianAngle = 0;
		var spaceStationX = centerX + radius * Math.cos( radianAngle );
		var spaceStationY = centerY + radius * Math.sin( radianAngle );
		
		imgSpaceStation.draw(context, spaceStationX, spaceStationY);
        
        var padding = 20;
        context.font = '20pt Calibri';
        context.fillStyle = 'white';
        context.fillText("x = centerX + radius * Math.cos(        );", padding, drawingHeight, drawingWidth - padding*2);
        context.fillText("y = centerY + radius * Math.sin(        );", padding, drawingHeight + 30, drawingWidth - padding*2);
        
        var slider = new Slider(padding, drawingHeight + 50, drawingWidth - (padding * 2), 30, 4, 14, 0.5);        
        slider.draw(context);
	}
}

Rect.prototype.containsPoint = function(x, y) {
    // Clever "use" or "abuse" of `switch`?
    switch (true)
    {
        case (x < this.x):
        case (x > this.x + this.width):
        case (y < this.y):
        case (y > this.y + this.height):
            return false;
        default: 
            return true;
    }
}

function Slider(x, y, width,...