// Un Matita che disegna una Matita che disegna



ctx.fillStyle = "#FFFFFF"; // Set the fill color to white

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



ctx.strokeStyle = "#000000"; // Set the stroke color to black

ctx.lineWidth = 2; // Set the line width to 2 pixels



// Draw the main pencil

ctx.beginPath();

ctx.moveTo(256, 0); // Start drawing from the top center of the canvas

ctx.lineTo(256, 256); // Draw a vertical line to the middle of the canvas

ctx.lineTo(512, 256); // Draw a horizontal line to the right of the canvas

ctx.lineTo(256, 0); // Draw a diagonal line back to the starting point

ctx.stroke(); // Actually draw the lines



// Draw the smaller pencil

ctx.beginPath();

ctx.moveTo(256, 256); // Start drawing from the middle of the canvas

ctx.lineTo(256, 512); // Draw a vertical line to the bottom of the canvas

ctx.lineTo(512, 512); // Draw a horizontal line to the bottom right of the canvas

ctx.lineTo(256, 256); // Draw a diagonal line back to the starting point

ctx.stroke(); // Actually draw the lines



// Draw the even smaller pencil

ctx.beginPath();

ctx.moveTo(256, 265); // Start drawing from a slightly lower position

ctx.lineTo(256, 512); // Draw a vertical line to the bottom of the canvas

ctx.lineTo(506, 512); // Draw a horizontal line to the bottom right of the canvas

ctx.lineTo(256, 265); // Draw a diagonal line back to the starting point

ctx.stroke(); // Actually draw the lines



// Add some details to the main pencil

ctx.beginPath();

ctx.moveTo(256, 0); // Start drawing from the top center of the canvas

ctx.lineTo(230, 50); // Draw a diagonal line to the left

ctx.lineTo(256, 60); // Draw a diagonal line back to the center

ctx.lineTo(282, 50); // Draw a diagonal line to the right

ctx.lineTo(256, 0); // Draw a diagonal line back to the starting point

ctx.stroke(); // Actually draw the lines



// Add some details to the smaller pencil

ctx.beginPath();

ctx.moveTo(256, 256); // Start drawing from the middle of the canvas

ctx.lineTo(230, 306); // Draw a diagonal line to the left

ctx.lineTo(256, 316); // Draw a diagonal line back to the center

ctx.lineTo(282, 306); // Draw a diagonal line to the right

ctx.lineTo(256, 256); // Draw a diagonal line back to the starting point

ctx.stroke(); // Actually draw the lines



// Add some details to the even smaller pencil

ctx.beginPath();

ctx.moveTo(256, 265); // Start drawing from a slightly lower position

ctx.lineTo(230, 315); // Draw a diagonal line to the left

ctx.lineTo(256, 325); // Draw a diagonal line back to the center

ctx.lineTo(282, 315); // Draw a diagonal line to the right

ctx.lineTo(256, 265); // Draw a diagonal line back to the starting point

ctx.stroke(); // Actually draw the lines



// Draw the pencil tip

ctx.beginPath();

ctx.moveTo(256, 0); // Start drawing from the top center of the canvas

ctx.lineTo(230, 50); // Draw a diagonal line to the left

ctx.lineTo(282, 50); // Draw a diagonal line to the right

ctx.lineTo(256, 0); // Draw a diagonal line back to the starting point

ctx.fill(); // Actually fill the shape with color



// Draw the smaller pencil tip

ctx.beginPath();

ctx.moveTo(256, 256); // Start drawing from the middle of the canvas

ctx.lineTo(230, 306); // Draw a diagonal line to the left

ctx.lineTo(282, 306); // Draw a diagonal line to the right

ctx.lineTo(256, 256); // Draw a diagonal line back to the starting point

ctx.fill(); // Actually fill the shape with color



// Draw the even smaller pencil tip

ctx.beginPath();

ctx.moveTo(256, 265); // Start drawing from a slightly lower position

ctx.lineTo(230, 315); // Draw a diagonal line to the left

ctx.lineTo(282, 315); // Draw a diagonal line to the right

ctx.lineTo(256, 265); // Draw a diagonal line back to the starting point

ctx.fill(); // Actually fill the shape with color



// Fun fact: This pencil is so meta, it can draw itself drawing itself drawing itself!

// I wonder if it ever gets confused about its own existence...