fix(UI): gates upper edge drawing issue

[Darshan808]

Description

Issue

This pull request addresses issue #310 : Corner Triangular Edge Display Issue Of Logic Gates.

Problem

The issue arises due to the upper edges of circuit elements, particularly gates with triangular corners like OR Gate, NOR Gate, X-OR Gate, etc., being slightly distorted on the default zoom level. This distortion affects the UI negatively, causing an inconsistent appearance.

Root Cause

Upon investigating, it was found that the distortion occurs during the drawing of the gates. While drawing curves, the Math.round() function is correctly used to round off decimal numbers. However, when moving the canvas context (ctx), Math.round() is not applied to the moving coordinates. As a result, when the ctx.closePath() method is called, the presence of decimal numbers, particularly .5 in both x and y coordinates, causes the upper edge distortion.

Solution

To resolve this issue, Math.round() is applied to the values before moving the ctx. This ensures that the coordinates are always rounded to whole numbers, resulting in smooth curve creation for the gates drawing.

Impact

Implementing this solution ensures consistent and distortion-free rendering of the circuit elements' upper edges, enhancing the UI experience for users.

Changes Made

• Applied Math.round() to coordinates before moving the canvas context to ensure whole number values.
• Tested the changes thoroughly to ensure they resolve the issue without introducing any other problems.

Testing

Manual Testing was done in order to validate the changes.

Screenshots

Before

After (for every positions and scales)

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	2dd4d9d
🔍 Latest deploy log	https://app.netlify.com/sites/circuitverse/deploys/6642b8b20c395b0008c8274c
😎 Deploy Preview	https://deploy-preview-311--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.