JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<script>
var updateCanvas;
</script>
<p>
  <input type="number" min="0" max="100" step="1" value="40" onchange="updateCanvas(this.value)" onkeyup="updateCanvas(this.value)" />
</p>
<canvas id="canvas" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>

CSS

canvas {
  width: 200px;
  height: 200px;
}

JavaScript

updateCanvas = function(percent) {
	var canvas = document.getElementById('canvas');
  draw_vertical_tank(canvas, percent/100);
  var canvas2 = document.getElementById('canvas2');
  draw_horizontal_tank(canvas2, percent/100);
}

updateCanvas(40);

function draw_horizontal_tank(canvas, fillPercent) {
  var context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);

  var radius = canvas.height / 2;
  
  var startAngle = degreesToRadians(150);
  var endAngle = degreesToRadians(210);
  context.beginPath();
  context.arc(canvas.width + canvas.height / 2 - canvas.width * 0.25, canvas.height / 2, radius, startAngle, endAngle, false);
  context.lineWidth = 4;
  context.strokeStyle = '#aaaaaa';
  context.stroke();

  var startAngle = degreesToRadians(30-60*fillPercent);
  var endAngle = degreesToRadians(30);
  context.beginPath();
  context.arc(canvas.width - canvas.height / 2 - canvas.width * 0.1, canvas.height / 2, radius, startAngle, endAngle, false);
  context.arc(canvas.width - canvas.height / 2 - canvas.width * 0.8, canvas.height / 2, radius, endAngle, startAngle, true);
  context.arc(canvas.width - canvas.height / 2 - canvas.width * 0.1, canvas.height / 2, radius, startAngle, endAngle, false);
  context.lineWidth = 1;
  context.strokeStyle = '#7AB1F1';
  context.stroke();
  context.fillStyle = '#7AB1F1';
  context.fill();
  
  var startAngle = degreesToRadians(30-60*(fillPercent+0.005));
  var endAngle = degreesToRadians(30-60*(fillPercent-0.005));
  context.beginPath();
  context.arc(canvas.width - canvas.height / 2 - canvas.width * 0.1, canvas.height / 2, radius, startAngle, endAngle, false);
  context.arc(canvas.width - canvas.height / 2 - canvas.width * 0.8, canvas.height / 2, radius, endAngle, startAngle, true);
  var startAngle = degreesToRadians(30-60*(fillPercent+((0.5-Math.abs(fillPercent-0.5))*0.055)));
  var endAngle = degreesToRadians(30-60*(fillPercent+((0.5-Math.abs(fillPercent-0.5))*0.045)));
  context.arc(canvas.width...