// Subway Map of Clinical Research Career Pathway



// Creating the canvas



// Getting the 2d context



// Background color

ctx.fillStyle = '#ffffff';

ctx.fillRect(0, 0, 512, 512);



// Drawing the subway lines

// Red Line

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(100, 400);

ctx.strokeStyle = '#ff0000';

ctx.lineWidth = 10;

ctx.stroke();



// Blue Line

ctx.beginPath();

ctx.moveTo(200, 100);

ctx.lineTo(200, 400);

ctx.strokeStyle = '#0000ff';

ctx.lineWidth = 10;

ctx.stroke();



// Green Line

ctx.beginPath();

ctx.moveTo(300, 100);

ctx.lineTo(300, 400);

ctx.strokeStyle = '#00ff00';

ctx.lineWidth = 10;

ctx.stroke();



// Yellow Line

ctx.beginPath();

ctx.moveTo(400, 100);

ctx.lineTo(400, 400);

ctx.strokeStyle = '#ffff00';

ctx.lineWidth = 10;

ctx.stroke();



// Drawing the stations

// Station 1

ctx.beginPath();

ctx.arc(100, 100, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 2

ctx.beginPath();

ctx.arc(100, 200, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 3

ctx.beginPath();

ctx.arc(100, 300, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 4

ctx.beginPath();

ctx.arc(100, 400, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 5

ctx.beginPath();

ctx.arc(200, 100, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 6

ctx.beginPath();

ctx.arc(200, 200, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 7

ctx.beginPath();

ctx.arc(200, 300, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 8

ctx.beginPath();

ctx.arc(200, 400, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 9

ctx.beginPath();

ctx.arc(300, 100, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 10

ctx.beginPath();

ctx.arc(300, 200, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 11

ctx.beginPath();

ctx.arc(300, 300, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 12

ctx.beginPath();

ctx.arc(300, 400, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 13

ctx.beginPath();

ctx.arc(400, 100, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 14

ctx.beginPath();

ctx.arc(400, 200, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 15

ctx.beginPath();

ctx.arc(400, 300, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Station 16

ctx.beginPath();

ctx.arc(400, 400, 10, 0, Math.PI * 2);

ctx.fillStyle = '#000000';

ctx.fill();



// Drawing the connections between stations

// Connection 1

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.lineTo(200, 100);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 2

ctx.beginPath();

ctx.moveTo(100, 200);

ctx.lineTo(200, 200);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 3

ctx.beginPath();

ctx.moveTo(100, 300);

ctx.lineTo(200, 300);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 4

ctx.beginPath();

ctx.moveTo(100, 400);

ctx.lineTo(200, 400);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 5

ctx.beginPath();

ctx.moveTo(200, 100);

ctx.lineTo(300, 100);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 6

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.lineTo(300, 200);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 7

ctx.beginPath();

ctx.moveTo(200, 300);

ctx.lineTo(300, 300);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 8

ctx.beginPath();

ctx.moveTo(200, 400);

ctx.lineTo(300, 400);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 9

ctx.beginPath();

ctx.moveTo(300, 100);

ctx.lineTo(400, 100);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 10

ctx.beginPath();

ctx.moveTo(300, 200);

ctx.lineTo(400, 200);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 11

ctx.beginPath();

ctx.moveTo(300, 300);

ctx.lineTo(400, 300);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Connection 12

ctx.beginPath();

ctx.moveTo(300, 400);

ctx.lineTo(400, 400);

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.stroke();



// Drawing the labels

ctx.font = 'bold 16px Arial';



// Label 1

ctx.fillStyle = '#000000';

ctx.fillText('Entry Level', 120, 130);



// Label 2

ctx.fillStyle = '#000000';

ctx.fillText('Research Assistant', 120, 230);



// Label 3

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Trial Coordinator', 120, 330);



// Label 4

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Manager', 120, 430);



// Label 5

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Associate', 220, 130);



// Label 6

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Coordinator', 220, 230);



// Label 7

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Scientist', 220, 330);



// Label 8

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Director', 220, 430);



// Label 9

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Investigator', 320, 130);



// Label 10

ctx.fillStyle = '#000000';

ctx.fillText('Principal Investigator', 320, 230);



// Label 11

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Consultant', 320, 330);



// Label 12

ctx.fillStyle = '#000000';

ctx.fillText('Clinical Research Executive', 320, 430);



// Finalizing the drawing



// Logging the generated code



// "All aboard the Clinical Research career train! Next stop: Advancement Station!"