Changed around line 1
+ class Shape {
+ constructor(type, x, y, size, color) {
+ this.type = type;
+ this.x = x;
+ this.y = y;
+ this.size = size;
+ this.color = color;
+ this.selected = false;
+ }
+
+ draw(ctx) {
+ ctx.fillStyle = this.color;
+ ctx.strokeStyle = this.selected ? '#2ecc71' : this.color;
+ ctx.lineWidth = 3;
+
+ switch(this.type) {
+ case 'rectangle':
+ ctx.fillRect(this.x, this.y, this.size, this.size);
+ if (this.selected) {
+ ctx.strokeRect(this.x, this.y, this.size, this.size);
+ }
+ break;
+ case 'circle':
+ ctx.beginPath();
+ ctx.arc(this.x + this.size/2, this.y + this.size/2, this.size/2, 0, Math.PI * 2);
+ ctx.fill();
+ if (this.selected) {
+ ctx.stroke();
+ }
+ break;
+ case 'triangle':
+ ctx.beginPath();
+ ctx.moveTo(this.x + this.size/2, this.y);
+ ctx.lineTo(this.x + this.size, this.y + this.size);
+ ctx.lineTo(this.x, this.y + this.size);
+ ctx.closePath();
+ ctx.fill();
+ if (this.selected) {
+ ctx.stroke();
+ }
+ break;
+ }
+ }
+
+ containsPoint(x, y) {
+ if (this.type === 'rectangle') {
+ return x >= this.x && x <= this.x + this.size &&
+ y >= this.y && y <= this.y + this.size;
+ } else if (this.type === 'circle') {
+ const dx = x - (this.x + this.size/2);
+ const dy = y - (this.y + this.size/2);
+ return dx * dx + dy * dy <= (this.size/2) * (this.size/2);
+ } else if (this.type === 'triangle') {
+ // Simple bounding box check for triangle
+ return x >= this.x && x <= this.x + this.size &&
+ y >= this.y && y <= this.y + this.size;
+ }
+ return false;
+ }
+ }
+
+ document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const shapes = [];
+ let selectedShape = null;
+
+ // Set canvas size
+ function resizeCanvas() {
+ canvas.width = Math.min(800, window.innerWidth - 40);
+ canvas.height = Math.min(600, window.innerHeight - 200);
+ }
+ resizeCanvas();
+ window.addEventListener('resize', resizeCanvas);
+
+ function draw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ shapes.forEach(shape => shape.draw(ctx));
+ }
+
+ function addShape(type) {
+ const color = document.getElementById('colorPicker').value;
+ const size = parseInt(document.getElementById('sizeSlider').value);
+ const x = canvas.width/2 - size/2;
+ const y = canvas.height/2 - size/2;
+
+ const shape = new Shape(type, x, y, size, color);
+ shapes.push(shape);
+ selectedShape = shape;
+ shapes.forEach(s => s.selected = (s === selectedShape));
+ draw();
+ }
+
+ document.getElementById('addRectangle').addEventListener('click', () => addShape('rectangle'));
+ document.getElementById('addCircle').addEventListener('click', () => addShape('circle'));
+ document.getElementById('addTriangle').addEventListener('click', () => addShape('triangle'));
+
+ canvas.addEventListener('click', (e) => {
+ const rect = canvas.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ selectedShape = null;
+ for (let i = shapes.length - 1; i >= 0; i--) {
+ if (shapes[i].containsPoint(x, y)) {
+ selectedShape = shapes[i];
+ break;
+ }
+ }
+
+ shapes.forEach(shape => shape.selected = (shape === selectedShape));
+ draw();
+ });
+
+ document.addEventListener('keydown', (e) => {
+ if (!selectedShape) return;
+
+ const step = 10;
+ switch(e.key) {
+ case 'ArrowLeft':
+ selectedShape.x -= step;
+ break;
+ case 'ArrowRight':
+ selectedShape.x += step;
+ break;
+ case 'ArrowUp':
+ selectedShape.y -= step;
+ break;
+ case 'ArrowDown':
+ selectedShape.y += step;
+ break;
+ case 'Delete':
+ const index = shapes.indexOf(selectedShape);
+ if (index > -1) {
+ shapes.splice(index, 1);
+ selectedShape = null;
+ }
+ break;
+ }
+ draw();
+ });
+
+ draw();
+ });
