I need to create a page looks like a picture. But it looks different.pdf

I need to create a page looks like a picture. But it looks different.
My html
Assignment 8Shapes Exercise
SquareCircleTriangleAdd to ArrayRemove LastDraw Shapes
My Js
let shapeArray = [];
const shapeSelect = document.getElementById("shapeSelect");
const addBtn = document.getElementById("addBtn");
const removeBtn = document.getElementById("removeBtn");
const drawBtn = document.getElementById("drawBtn");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
addBtn.addEventListener("click", function () {
const selectedShape = shapeSelect.value;
if (shapeArray.length < 5) {

shapeArray.push(selectedShape);
} else {
alert("You cannot add more than 5 shapes to the array.");
}
});
removeBtn.addEventListener("click", function () {
shapeArray.pop();
});
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI);
ctx.stroke();
}
function drawTriangle(x, y) {
const sideLength = 100;
const height = sideLength * Math.sqrt(3) / 2;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + sideLength / 2, y + height);
ctx.lineTo(x - sideLength / 2, y + height);
ctx.closePath();
ctx.stroke();
}
function drawSquare(x, y) {
ctx.beginPath();
ctx.rect(x, y, 100, 100);
ctx.stroke();
}
drawBtn.addEventListener("click", function () {

ctx.clearRect(0, 0, canvas.width, canvas.height);
shapeArray.forEach(function (shape, index) {
switch (shape) {
case"circle":
drawCircle(50 + index * 150, 100);
break;
case"triangle":
drawTriangle(50 + index * 150, 100);
break;
case"square":
drawSquare(50 + index * 150, 100);
break;
default:
console.error("Unknown shape: " + shape);
break;
}
});
});

} else {
}
});
shapeArray.pop();
});
ctx.beginPath();
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(x, y);
ctx.closePath();
ctx.stroke();
}
ctx.beginPath();
ctx.rect(x, y, 100, 100);
ctx.stroke();
}

switch (shape) {
case"circle":
break;
case"triangle":
break;
case"square":
break;
default:
break;
}
});
});
} else {

}
});
shapeArray.pop();
});
ctx.beginPath();
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(x, y);
ctx.closePath();
ctx.stroke();
}
ctx.beginPath();
ctx.rect(x, y, 100, 100);
ctx.stroke();
}
switch (shape) {
case"circle":
break;
case"triangle":
break;
case"square":

break;
default:
break;
}
});
}); Exercise 11 Draw Shapes

I need to create a page looks like a picture. But it looks different.pdf

More Related Content

Similar to I need to create a page looks like a picture. But it looks different.pdf (20)

More from allurafashions98 (20)

Recently uploaded (20)

I need to create a page looks like a picture. But it looks different.pdf