Skip to content

Instantly share code, notes, and snippets.

@harpreetkhalsagtbit

harpreetkhalsagtbit/circle-using-algo-in-canvas.js

Last active July 20, 2024 19:14
Show Gist options
  • Save harpreetkhalsagtbit/e304cb4794d376c3d1404cdae1129304 to your computer and use it in GitHub Desktop.
Save harpreetkhalsagtbit/e304cb4794d376c3d1404cdae1129304 to your computer and use it in GitHub Desktop.
Download ZIP
Circle Using Equations - Canvas API
Raw
circle-using-algo-in-canvas.js
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function drawPixel(x1, y1, x2, y2, color) {
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath()
}
function drawCircleUsingEquation(x, y, sides = 2, rx = 0, ry = 0, r) {
let px = 0, py = 0;
let thetaInc = (sides / 2)
let radianInc = Math.PI / thetaInc;
let pixelSize = 1;
rx += 0.01
ry += 0.01
for (let i = 0; i <= Math.PI * 2; i += radianInc) {
let dx = x + r * Math.sin(i + rx);
let dy = y + r * Math.cos(i + ry);
drawPixel(dx + pixelSize, dy + pixelSize, dx, dy, Math.trunc(i % 2) === 0 ? "red":"blue")
px = dx;
py = dy;
}
}
const rx = 0;
const ry = 0;
const r = 200;
const sides = 360;
drawCircleUsingEquation(210, 210, sides, rx, ry, r, true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment