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);
	
var drawingWidth = 500;
var drawingHeight = 500;
var centerX = drawingWidth / 2;
var centerY = drawingHeight / 2;
var radius = 150;

var padding = 20;
var slider = new Slider(padding, drawingHeight + 50, drawingWidth - (padding * 2), 30, 4, 14, 0.5);
slider.listen(document.getElementById('ufo-demo-radianAngle'));

var requestAnimationFrame = window.requestAnimationFrame ||  window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

//document.addEventListener('DOMContentLoaded', firstDraw);
document.addEventListener('click', init);
function init() {
    document.removeEventListener('click', init);

	imgEarth.center();
	imgSpaceStation.center();
    
    requestAnimationFrame(drawAll);
    
    function drawAll() {
    
	var demos = document.querySelectorAll(".ufo-demo");
	for (var i = 0; i < demos.length; i++) {
        var canvas = demos[i];
		var context = canvas.getContext("2d");
        
        context.clear();
        
		//imgSpaceBackground.draw(context, 0, 0);
		imgEarth.draw(context, centerX, centerY);
		
		var radianAngle = slider.value * (Math.TAU * 2) - Math.TAU;
		var spaceStationX = centerX + radius * Math.cos( radianAngle );
		var spaceStationY = centerY + radius * Math.sin( radianAngle );
		
		imgSpaceStation.draw(context, spaceStationX, spaceStationY);
        
        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);
        
...