AmatsuZero/polygon.js

## polygon.js
const canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),

    slidesSelect = document.getElementById('sideSelect'),
    startAngleSelect = document.getElementById('startAngleSelect'),

    fillCheckbox = document.getElementById('fillCheckbox'),

    mosuseDown = {x:0, y: 0},
    rubberBandRect = {}

class Point {
    constructor(x,y) {
        this.x = x
        this.y = y
    }
}

function getPolygonPoints(centerX, centerY, radius, sides, startAngle) {
    let points = [],
        angle = startAngle
    for(let i = 0; i < sides; i++) {
        points.push(new Point(centerX + radius * Math.sin(angle),
                              centerY - radius * Math.cos(angle)))
        angle += 2*Math.PI/sides
    }
    return points
}

function createPolygonPath(startX, centerY, radius, sides, startAngle) {
    const points = getPolygonPoints(startX, centerY, radius, sides, startAngle)

    context.beginPath()
    context.moveTo(points[0].x, points[0].y)

    for (let i = 1; i < sides; ++i) {
        context.lineTo(points[i].x, points[i].y)
    }

    context.closePath()
}

function drawRubberbandShape(loc, sides, startAngle) {
    createPolygonPath(mosuseDown.x,
        mosuseDown.y,
        rubberBandRect.width,
        parseInt(slidesSelect.value),
        (Math.PI/180)*parseInt(startAngleSelect.value))

    context.stroke()
    if (fillCheckbox.checked)
        context.fill()
}

## sprite.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sprite Sheets</title>
    <style type="text/css">
        body {
            background: #dddddd;
        }

        #canvas {
            position: absolute;
            left: 0px;
            top: 20px;
            margin: 20px;
            background: #ffffff;
            border: thin inset rgba(100,150,230, 0.5);
            cursor: pointer;
        }

        #readout {
            margin-top: 10px;
            margin-left: 15px;
            color: blue;
        }
    </style>
</head>
<body>
<div id="readout"></div>
<canvas id="canvas" width="500" height="250">
    Canvas not supported
</canvas>
<script type="text/javascript">
    const canvas = document.getElementById('canvas'),
        readout = document.getElementById('readout'),
        context = canvas.getContext('2d'),
        spriteSheet = new Image();

    const windowToCanvas = (c, x ,y) => {
        const bbox = c.getBoundingClientRect();
        return {
            x: x-bbox.left*(c.width/bbox.width),
            y: y-bbox.top*(c.height/bbox.height)
        }
    };

    const drawBackground = () => {
        const VERTICAL_LINE_SPACING = 12;

        for(let i = context.canvas.height;
            i > VERTICAL_LINE_SPACING*4;
            i-=VERTICAL_LINE_SPACING) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }
    };

    const drawSpriteSheet = () => context.drawImage(spriteSheet, 0 ,0);

    const drawGuidelines = (x,y) => {
       context.strokeStyle = 'rgba(0,0,230,0.8)';
       context.lineWidth = 0.5;
       drawVerticalLine(x);
       drawHorizontalLine(y);
    };

    const drawHorizontalLine = (y) => {
        context.beginPath();
        context.moveTo(0,y+0.5);
        context.lineTo(context.canvas.width, y+0.5);
        context.stroke();
    };

    const updateReadout = (x, y) => readout.innerText = `
    (${x.toFixed(0)}, ${y.toFixed(0)})
    `;

    const drawVerticalLine = (x) => {
        context.beginPath();
        context.moveTo(x+0.5, 0);
        context.lineTo(x+0.5, context.canvas.height);
        context.stroke();
    };

    canvas.onmousemove = (e) => {
        const loc = windowToCanvas(canvas, e.clientX, e.clientY);
        drawBackground();
        drawSpriteSheet();
        drawGuidelines(loc.x, loc.y);
        updateReadout(loc.x, loc.y);
    };

    spriteSheet.src = './running-sprite-sheet.png';
    spriteSheet.onload = () => drawSpriteSheet();
    drawBackground();
</script>
</body>
</html>
	const canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),

	slidesSelect = document.getElementById('sideSelect'),
	startAngleSelect = document.getElementById('startAngleSelect'),

	fillCheckbox = document.getElementById('fillCheckbox'),

	mosuseDown = {x:0, y: 0},
	rubberBandRect = {}

	class Point {
	constructor(x,y) {
	this.x = x
	this.y = y
	}
	}

	function getPolygonPoints(centerX, centerY, radius, sides, startAngle) {
	let points = [],
	angle = startAngle
	for(let i = 0; i < sides; i++) {
	points.push(new Point(centerX + radius * Math.sin(angle),
	centerY - radius * Math.cos(angle)))
	angle += 2*Math.PI/sides
	}
	return points
	}

	function createPolygonPath(startX, centerY, radius, sides, startAngle) {
	const points = getPolygonPoints(startX, centerY, radius, sides, startAngle)

	context.beginPath()
	context.moveTo(points[0].x, points[0].y)

	for (let i = 1; i < sides; ++i) {
	context.lineTo(points[i].x, points[i].y)
	}

	context.closePath()
	}

	function drawRubberbandShape(loc, sides, startAngle) {
	createPolygonPath(mosuseDown.x,
	mosuseDown.y,
	rubberBandRect.width,
	parseInt(slidesSelect.value),
	(Math.PI/180)*parseInt(startAngleSelect.value))

	context.stroke()
	if (fillCheckbox.checked)
	context.fill()
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Sprite Sheets</title>
	<style type="text/css">
	body {
	background: #dddddd;
	}

	#canvas {
	position: absolute;
	left: 0px;
	top: 20px;
	margin: 20px;
	background: #ffffff;
	border: thin inset rgba(100,150,230, 0.5);
	cursor: pointer;
	}

	#readout {
	margin-top: 10px;
	margin-left: 15px;
	color: blue;
	}
	</style>
	</head>
	<body>
	<div id="readout"></div>
	<canvas id="canvas" width="500" height="250">
	Canvas not supported
	</canvas>
	<script type="text/javascript">
	const canvas = document.getElementById('canvas'),
	readout = document.getElementById('readout'),
	context = canvas.getContext('2d'),
	spriteSheet = new Image();

	const windowToCanvas = (c, x ,y) => {
	const bbox = c.getBoundingClientRect();
	return {
	x: x-bbox.left*(c.width/bbox.width),
	y: y-bbox.top*(c.height/bbox.height)
	}
	};

	const drawBackground = () => {
	const VERTICAL_LINE_SPACING = 12;

	for(let i = context.canvas.height;
	i > VERTICAL_LINE_SPACING*4;
	i-=VERTICAL_LINE_SPACING) {
	context.beginPath();
	context.moveTo(0, i);
	context.lineTo(context.canvas.width, i);
	context.stroke();
	}
	};

	const drawSpriteSheet = () => context.drawImage(spriteSheet, 0 ,0);

	const drawGuidelines = (x,y) => {
	context.strokeStyle = 'rgba(0,0,230,0.8)';
	context.lineWidth = 0.5;
	drawVerticalLine(x);
	drawHorizontalLine(y);
	};

	const drawHorizontalLine = (y) => {
	context.beginPath();
	context.moveTo(0,y+0.5);
	context.lineTo(context.canvas.width, y+0.5);
	context.stroke();
	};

	const updateReadout = (x, y) => readout.innerText = `
	(${x.toFixed(0)}, ${y.toFixed(0)})
	`;

	const drawVerticalLine = (x) => {
	context.beginPath();
	context.moveTo(x+0.5, 0);
	context.lineTo(x+0.5, context.canvas.height);
	context.stroke();
	};

	canvas.onmousemove = (e) => {
	const loc = windowToCanvas(canvas, e.clientX, e.clientY);
	drawBackground();
	drawSpriteSheet();
	drawGuidelines(loc.x, loc.y);
	updateReadout(loc.x, loc.y);
	};

	spriteSheet.src = './running-sprite-sheet.png';
	spriteSheet.onload = () => drawSpriteSheet();
	drawBackground();
	</script>
	</body>
	</html>