// Title: Retail ER Diagram Fun



// Creating the canvas and 2d context



// Drawing the ER Diagram with colorful imagination

// Feel free to customize the colors and layout as you like!



// Drawing the main entity

ctx.fillStyle = '#FFD700'; // Golden color for the entity

ctx.fillRect(200, 50, 100, 50); // Entity rectangle

ctx.fillStyle = '#000'; // Black color for the text

ctx.font = 'bold 14px Arial';

ctx.fillText('Retail', 225, 80); // Entity name



// Drawing the multi-valued attribute

ctx.fillStyle = '#FF69B4'; // Pink color for the attribute

ctx.fillRect(150, 150, 50, 50); // Attribute rectangle

ctx.fillStyle = '#000'; // Black color for the text

ctx.font = 'bold 12px Arial';

ctx.fillText('Attribute', 155, 180); // Attribute name



// Drawing the unary relationship

ctx.beginPath();

ctx.moveTo(275, 100); // Starting point for the line

ctx.lineTo(325, 100); // Ending point for the line

ctx.lineTo(325, 150); // Line going down

ctx.lineTo(275, 150); // Line going left

ctx.fillStyle = '#00FF00'; // Green color for the relationship

ctx.fill(); // Filling the shape



// Drawing the many-to-many relationship

ctx.beginPath();

ctx.moveTo(200, 100); // Starting point for the line

ctx.lineTo(200, 150); // Line going down

ctx.lineTo(250, 150); // Line going right

ctx.lineTo(250, 100); // Line going up

ctx.fillStyle = '#FF1493'; // Pink color for the relationship

ctx.fill(); // Filling the shape



// Drawing the weak entity (lazy notation)

ctx.fillStyle = '#808080'; // Gray color for the weak entity

ctx.fillRect(350, 200, 100, 50); // Weak entity rectangle

ctx.fillStyle = '#000'; // Black color for the text

ctx.font = 'bold 14px Arial';

ctx.fillText('Weak', 370, 230); // Weak entity name



// Drawing the associative entity

ctx.fillStyle = '#00BFFF'; // Blue color for the associative entity

ctx.fillRect(150, 300, 100, 50); // Associative entity rectangle

ctx.fillStyle = '#000'; // Black color for the text

ctx.font = 'bold 14px Arial';

ctx.fillText('Associative', 155, 330); // Associative entity name



// Drawing the additional tables

ctx.fillStyle = '#FFA500'; // Orange color for the tables

ctx.fillRect(350, 300, 50, 50); // Table 1 rectangle

ctx.fillRect(425, 300, 50, 50); // Table 2 rectangle

ctx.fillRect(275, 300, 50, 50); // Table 3 rectangle

ctx.fillRect(200, 400, 50, 50); // Table 4 rectangle

ctx.fillRect(275, 400, 50, 50); // Table 5 rectangle

ctx.fillRect(350, 400, 50, 50); // Table 6 rectangle

ctx.fillRect(425, 400, 50, 50); // Table 7 rectangle

ctx.fillRect(150, 400, 50, 50); // Table 8 rectangle

ctx.fillRect(500, 300, 50, 50); // Table 9 rectangle

ctx.fillRect(500, 400, 50, 50); // Table 10 rectangle

ctx.fillRect(425, 200, 50, 50); // Table 11 rectangle

ctx.fillRect(500, 200, 50, 50); // Table 12 rectangle



// Adding some fun comments to make you smile

// Because ER Diagrams can be fun too!



// "Retail Therapy: Diagram Edition!"

// "When Relationships Get Complicated: Retail's Love Story"

// "From Attributes to Tables: A Retailer's Adventure"

// "The Colorful World of Retail Relationships"

// "Tables and Entities and Relationships, Oh My!"

// "Retail's Wonderland: Where ER Diagrams Come to Life"

// "Unraveling the Mysteries of Retail with ER Diagrams"

// "When Retail Meets Imagination: ER Diagram Magic"

// "An Artist's Palette: Creating an ER Diagram for Retail"

// "In the Retail Universe: Entities, Relationships, and Tables"

// "From Concepts to Canvas: The Art of Retail ER Diagrams"



// Returning the canvas variable