function resize(canvasElement) {
window.addEventListener("resize", function () {
canvasElement.width = window.innerWidth / 3;
canvasElement.height = window.innerHeight * 0.9975;
})
}
var radius = 5;
class roundRect {
constructor(rectX, rectY, rectHeight, rectWidth, stroke, fill, c) {
c.clearRect(0, 0, 1000, 1000);
c.beginPath();
c.strokeStyle = stroke;
c.fillStyle = fill;
c.moveTo(rectX + rectWidth/2, rectY);
c.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + rectHeight, radius);
c.arcTo(rectX + rectWidth, rectY + rectHeight, rectX, rectY + rectHeight, radius);
c.arcTo(rectX, rectY + rectHeight, rectX, rectY, radius);
c.arcTo(rectX, rectY, rectX + rectWidth / 2, rectY, radius);
c.closePath();
c.fill();
c.stroke();
}
}
function animate(rectYpar) {
new roundRect(50, rectYpar, 100, 8, "red", "red", ctx);
requestAnimationFrame(animate);
}
{
var canvas = document.body.querySelector("#canvasOne");
canvas.width = window.innerWidth / 3;
canvas.height = window.innerHeight * 0.9975;
resize(canvas);
var ctx = canvas.getContext("2d");
animate(0)
}
body {
margin: 0;
}
#canvasOne {
border:1px solid black;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvasOne"></canvas>
</body>
</html>
