// DJ Rockin' the Data Flow

// Just another day in the digital disco!



ctx.fillStyle = "#000"; // Set background color to black

ctx.fillRect(0, 0, 512, 512); // Draw a black background



// Draw the DJ turntable

ctx.fillStyle = "#333"; // Set turntable color to dark gray

ctx.fillRect(100, 180, 312, 152); // Draw turntable base



ctx.fillStyle = "#666"; // Set platter color to light gray

ctx.fillRect(116, 196, 280, 120); // Draw platter



// Draw the DJ's hands

ctx.strokeStyle = "#fff"; // Set hand color to white

ctx.lineWidth = 4; // Set hand thickness



// Draw the left hand

ctx.beginPath();

ctx.moveTo(100, 180); // Start at turntable base

ctx.lineTo(60, 240); // Draw line to left

ctx.lineTo(100, 300); // Draw line down to left hand

ctx.stroke(); // Draw the left hand



// Draw the right hand

ctx.beginPath();

ctx.moveTo(412, 180); // Start at turntable base

ctx.lineTo(452, 240); // Draw line to right

ctx.lineTo(412, 300); // Draw line down to right hand

ctx.stroke(); // Draw the right hand



// Draw the data flowing out

ctx.fillStyle = "#00f"; // Set data color to blue



// Draw the first data line

ctx.beginPath();

ctx.moveTo(100, 300); // Start at left hand

ctx.lineTo(52, 100); // Draw line up to top left

ctx.lineTo(112, 100); // Draw line across to top right

ctx.lineTo(160, 300); // Draw line down to right hand

ctx.fill(); // Fill the first data line



// Draw the second data line

ctx.beginPath();

ctx.moveTo(160, 300); // Start at right hand

ctx.lineTo(208, 100); // Draw line up to top left

ctx.lineTo(268, 100); // Draw line across to top right

ctx.lineTo(316, 300); // Draw line down to left hand

ctx.fill(); // Fill the second data line



// Draw the third data line

ctx.beginPath();

ctx.moveTo(316, 300); // Start at left hand

ctx.lineTo(268, 100); // Draw line up to top left

ctx.lineTo(328, 100); // Draw line across to top right

ctx.lineTo(376, 300); // Draw line down to right hand

ctx.fill(); // Fill the third data line



// Draw the fourth data line

ctx.beginPath();

ctx.moveTo(376, 300); // Start at right hand

ctx.lineTo(428, 100); // Draw line up to top left

ctx.lineTo(488, 100); // Draw line across to top right

ctx.lineTo(444, 300); // Draw line down to left hand

ctx.fill(); // Fill the fourth data line



// Draw the spinning record

ctx.fillStyle = "#ff0"; // Set record color to yellow

ctx.beginPath();

ctx.arc(256, 256, 80, 0, 2 * Math.PI); // Draw record circle

ctx.fill(); // Fill the spinning record



// Draw the record label

ctx.fillStyle = "#000"; // Set label color to black

ctx.beginPath();

ctx.arc(256, 256, 60, 0, 2 * Math.PI); // Draw label circle

ctx.fill(); // Fill the record label



// Draw the text on the label

ctx.fillStyle = "#fff"; // Set text color to white

ctx.font = "bold 48px Arial"; // Set font style

ctx.textAlign = "center"; // Set text alignment to center

ctx.fillText("DJ", 256, 270); // Draw "DJ" on label



// Draw some music notes

ctx.fillStyle = "#fff"; // Set note color to white



// Draw the first note

ctx.beginPath();

ctx.moveTo(200, 320); // Start at left side of note

ctx.lineTo(200, 360); // Draw line down to bottom

ctx.quadraticCurveTo(200, 380, 220, 380); // Draw curve to right

ctx.lineTo(240, 380); // Draw line to right

ctx.quadraticCurveTo(260, 380, 260, 360); // Draw curve to top

ctx.lineTo(260, 320); // Draw line up to top

ctx.fill(); // Fill the first note



// Draw the second note

ctx.beginPath();

ctx.moveTo(300, 320); // Start at left side of note

ctx.lineTo(300, 360); // Draw line down to bottom

ctx.quadraticCurveTo(300, 380, 320, 380); // Draw curve to right

ctx.lineTo(340, 380); // Draw line to right

ctx.quadraticCurveTo(360, 380, 360, 360); // Draw curve to top

ctx.lineTo(360, 320); // Draw line up to top

ctx.fill(); // Fill the second note



// Draw the third note

ctx.beginPath();

ctx.moveTo(400, 320); // Start at left side of note

ctx.lineTo(400, 360); // Draw line down to bottom

ctx.quadraticCurveTo(400, 380, 420, 380); // Draw curve to right

ctx.lineTo(440, 380); // Draw line to right

ctx.quadraticCurveTo(460, 380, 460, 360); // Draw curve to top

ctx.lineTo(460, 320); // Draw line up to top

ctx.fill(); // Fill the third note



// Dance like nobody's watching!

// Just keep spinning those platters, DJ!