fix(UI): gates upper edge drawing issue fix

[Darshan808]

Description

Issue

This pull request addresses issue #4928 : 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 to validate the changes.

Screenshots

####Before

####After (in every condition)

[codeclimate]

Code Climate has analyzed commit 722bd70 and detected 0 issues on this pull request.

View more on Code Climate.

[Darshan808]

@Prerna-0202 Please review my PR. Or please tell me if i am missing something.

[Prerna-0202]

Great 🚀 @Darshan808 . Thanks for this fix.