jump calculator

by frogggeee McFrogggeee

HTML

<canvas id = "canvas" width = "540" height = "360" style = "border: 1px solid"></canvas>
<br>
<div style = "border: 1px solid; width: 150px">

zoom:<br>
<input type="range" min="1" max="20" value="4">
</div>

JavaScript

let ctx = document.getElementById("canvas").getContext("2d");
let zoom = 4;
let x = 0;
let y = 0;
let jump = {
  radius: 10,
  angle: 50,
  x: 20,
  y: 10
}
let back = new Image();
back.src = "https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/rm233-eye-03.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=ca061c8301c70fa4e2234857a0797643";

function arc(x, y, r, a) {
  ctx.beginPath();
  ctx.arc(x * zoom, 360 - (y * zoom), r * zoom, (Math.PI*2/360)*(90), (Math.PI*2/360)*(360-a+90), true);
  ctx.stroke();
}
function render () {
	ctx.clearRect(0, 0, 1000, 1000)
  ctx.drawImage(back, -14, -11);
	arc(jump.x, jump.y, jump.radius, jump.angle)
	//jump.angle+= 0.3;
}
setInterval(render, 10);