matt-blodgett · June 27, 2020 17:02
diff --git a/canvas_test.html b/canvas_test.html
 <!DOCTYPE html>
 <head>
  <title>Canvas Animation Test</title>
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" /> -->
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" /> -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
 </head>
 <body>
  <div id="div-container">
    <h1>Canvas Animation Test</h1>
    <canvas id="canvas-animation" width="700" height="400"></canvas>
    <div id="div-separator"></div>
    <button id="btn-start" onClick="start()">START</button>
    <button id="btn-reset" onClick="reset()">RESET</button>
  </div>
 </body>

 <script>
 const canvas = document.getElementById('canvas-animation');
 const context = canvas.getContext('2d');

 // const x_center = canvas.width / 2;
 // const y_center = canvas.height / 2;

 const start = function () {
  console.log('start animation');

  // context.arc(x, y, radius, startAngle, endAngle);

  // context.beginPath();
  // context.arc(100, 100, 50, 0, 2 * Math.PI, false);
  // context.lineWidth = 5;
  // context.fillStyle = "#ADADAD";
  // context.strokeStyle = "#000000";
  // context.fill();
  // context.stroke();
  // context.closePath();

  context.beginPath();
  context.arc(canvas.width / 2, canvas.height / 2, 10, 0, 2 * Math.PI, false);
  context.fillStyle = "#000000";
  context.fill();
  context.closePath();
 }

 const reset = function () {
  console.log('reset animation')

  context.clearRect(0, 0, canvas.width, canvas.height);
 }
 </script>

 <style>
 body {
  font-family: 'Lato', sans-serif;
  background-color: rgb(130, 130, 130);
 }

 div#div-container {
  margin: auto;
  padding: 20px;
  width: 720px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
  border-radius: 4px;
 }

 canvas {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
 }

 button {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: rgb(255, 255, 255);
  margin: 10px 2px 2px 2px;
  padding: 2px;
  width: 120px;
  height: 36px;
  background-color: rgb(72, 111, 148);
  border: 1px solid rgb(58, 92, 124);
  border-radius: 4px;
  transition-duration: 0.2s;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 4px 12px 0px rgba(0, 0, 0, 0.14);
 }
 button:hover {
  background-color: rgb(97, 129, 158);
  border: 1px solid rgb(72, 111, 148);
 }
 button:active {
  background-color: rgb(97, 129, 158);
  box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.12), 0px 8px 12px 0px rgba(0, 0, 0, 0.11), -4px 4px 8px 2px rgba(0, 0, 0, 0.09), 4px 4px 8px 2px rgba(0, 0, 0, 0.09);
 }
 button:focus {
  outline: 0;
 }
 </style>

 </html>
	<!DOCTYPE html>
	<head>
	<title>Canvas Animation Test</title>
	<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" /> -->
	<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" /> -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
	</head>
	<body>
	<div id="div-container">
	<h1>Canvas Animation Test</h1>
	<canvas id="canvas-animation" width="700" height="400"></canvas>
	<div id="div-separator"></div>
	<button id="btn-start" onClick="start()">START</button>
	<button id="btn-reset" onClick="reset()">RESET</button>
	</div>
	</body>

	<script>
	const canvas = document.getElementById('canvas-animation');
	const context = canvas.getContext('2d');

	// const x_center = canvas.width / 2;
	// const y_center = canvas.height / 2;

	const start = function () {
	console.log('start animation');

	// context.arc(x, y, radius, startAngle, endAngle);

	// context.beginPath();
	// context.arc(100, 100, 50, 0, 2 * Math.PI, false);
	// context.lineWidth = 5;
	// context.fillStyle = "#ADADAD";
	// context.strokeStyle = "#000000";
	// context.fill();
	// context.stroke();
	// context.closePath();

	context.beginPath();
	context.arc(canvas.width / 2, canvas.height / 2, 10, 0, 2 * Math.PI, false);
	context.fillStyle = "#000000";
	context.fill();
	context.closePath();
	}

	const reset = function () {
	console.log('reset animation')

	context.clearRect(0, 0, canvas.width, canvas.height);
	}
	</script>

	<style>
	body {
	font-family: 'Lato', sans-serif;
	background-color: rgb(130, 130, 130);
	}

	div#div-container {
	margin: auto;
	padding: 20px;
	width: 720px;
	height: 100%;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(0, 0, 0);
	border-radius: 4px;
	}

	canvas {
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(0, 0, 0);
	}

	button {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: rgb(255, 255, 255);
	margin: 10px 2px 2px 2px;
	padding: 2px;
	width: 120px;
	height: 36px;
	background-color: rgb(72, 111, 148);
	border: 1px solid rgb(58, 92, 124);
	border-radius: 4px;
	transition-duration: 0.2s;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15), 0px 4px 12px 0px rgba(0, 0, 0, 0.14);
	}
	button:hover {
	background-color: rgb(97, 129, 158);
	border: 1px solid rgb(72, 111, 148);
	}
	button:active {
	background-color: rgb(97, 129, 158);
	box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.12), 0px 8px 12px 0px rgba(0, 0, 0, 0.11), -4px 4px 8px 2px rgba(0, 0, 0, 0.09), 4px 4px 8px 2px rgba(0, 0, 0, 0.09);
	}
	button:focus {
	outline: 0;
	}
	</style>

	</html>