HTML5 Canvas Circles & Pac-man

Canvas circle primitive and example of what we can do with it

It’s time to learn how to work with circles. But the basic primitives it’s too boring, so we ll create a pacman :)

Arc

Let’s draw our first arc. We can do that with arc function

context.arc(x, y, radius, angleFrom, angleTo, false);

So these lines

window.onload = function () {
   let canvas = document.getElementById('pacman');
   let context = canvas.getContext("2d");

   let radian = Math.PI / 180;

   context.beginPath();
   context.strokeStyle = "red";
   context.lineWidth = 5;
   context.arc(250, 250, 100, 0, 360 * radian, false);
   context.stroke();
}

give us a circle

Circle with Arc

Two line + an arc result

context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.moveTo(250,250);
context.lineTo(330,310);
context.arc(250, 250, 100, 37 * radian, 323 * radian, false);
context.lineTo(250,250);
context.stroke();

2 lines + 1 arc

Let’s change it to orange

context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "orange";
context.fillStyle = "orange"
context.moveTo(250,250);
context.lineTo(330,310);
context.arc(250, 250, 100, 37 * radian, 323 * radian, false);
context.lineTo(250,250);
context.stroke();
context.fill();

Orange color

context.beginPath();
context.fillStyle = "black";
context.arc(250,200, 10, 0 * radian, 360 * radian, false);
context.stroke();
context.fill();

Now we add our eye, so a second arc

context.beginPath();
context.fillStyle = "black";
context.arc(250,200, 10, 0 * radian, 360 * radian, false);
context.stroke();
context.fill();

Eye

And in the end we put 5 additional elements

context.fillStyle = "yellow";
let delta = 50;
let nb = 5;
for (let i = 1; i <= nb; i++) {
   context.beginPath();
   context.arc(250 + i * delta, 250, 10, 0 * radian, 360 * radian, false);
   context.stroke();
   context.fill();
}

Result

You can check the code for this part here.

Pac-man & 5 items

Thank you for your attention.

Thank you for your attention.

Do you need help with web or mobile development? Feel free to contact me here.

P.S. I really appreciate your like or share 🙏.