@@ -5,7 +5,7 @@
image-rendering: pixelated;
}
</style>
-<canvas id="canvas" width="125" height="125"></canvas>
+<canvas id="canvas" width="550" height="325"></canvas>
<script>
const canvas = document.getElementById("canvas")
@@ -19,4 +19,19 @@
context.ellipse(20,20,15,8,1.2273132071162383,4.1926143018618225,2.8853539230051624);
context.stroke();
context.fill();
+
+ for (let i = 0; i < 2; i++) {
+ for (let j = -5; j <= 5; j++) {
+ context.beginPath();
+ let x = 25 + (j + 5) * 50;
+ let y = 150 + i * 50;
+ let radius = 20;
+ let startAngle = 0;
+ let endAngle = (Math.PI * j) / 2;
+ let counterclockwise = i == 1;
+ context.arc(x, y, radius, startAngle, endAngle, counterclockwise);
+ context.stroke();
+ }
</script>