HTML5 Canvas Circles & Pac-man

Arc

context.arc(x, y, radius, angleFrom, angleTo, false);
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();
}
Circle with Arc
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
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();
context.beginPath();
context.fillStyle = "black";
context.arc(250,200, 10, 0 * radian, 360 * radian, false);
context.stroke();
context.fill();
Eye
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

Pac-man & 5 items

Thank you for your attention.

Senior web developer, architect, cryptocurrencies trader, https://lytvynov-anton.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store