JavaScript (canvas) robot simulation of a 2DOF SCARA robot arm using Arduino microcontroller and closed loop PID control

I would like to build a fully interactive simulation using a canvas JavaScript embedded in a html page of a 2DOF SCARA robot arm that draws a straight line trajectory with a laser as its end-effector on a 2D Cartesian plane coordinate system. Ultimately coordinates should be able to be entered to the simulation and the robot arm should be able to move to any point on the chessboard. The chessboard is a 20 x 20 grid that has 30 x 30 mm squares. The arm will occupy a 3 x 3 grid in one of the chessboard corners. The calculated trajectory equations, inverse kinematics equations, as well as the control code that will send commands to the robot motors to control the arm (basically all input and output) needs to be visible during the simulation and be able to be fully changeable. I would like to use PID control for the motors and be able to change all of these values. I would also like to use an Arduino microcontroller, requiring interpolation. It would be great to receive a brief guide from you detailing what you have done with the simulation and how you did it. Specifically I would like this to include suitable choices for the motors, parts, materials, and sensors (basically all electronic and mechanical components) required for the robot arm along with any justifications for the choice (e.g. calculations and your professional knowledge). Also detailing top speed and accuracy of the arm including what errors would exist and where would the largest errors come from according to the parts chosen. The simulation should try to resemble the actual real life behaviour of the parts you have chosen above. Could you please also include the PID control loop process and integration used in the guide documentation along with any assumptions made, all variables used in the code (if not already defined) and any calculations made (kinematics, etc.).