PROBA 1 – KOZMETIKA

body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111;
}
canvas {
cursor: pointer;
border: 3px solid #222;
}
#colorPicker {
position: absolute;
visibility: hidden;
}

const canvas = document.getElementById(‘roomCanvas’);
const ctx = canvas.getContext(‘2d’);
const colorPicker = document.getElementById(‘colorPicker’);

// Load background image from user's site
const img = new Image();
img.src=”https://plandom.rs/wp-content/uploads/2025/02/ENTERIJERSKA-RESENJA.jpg”;

// Define clickable areas for bed and armchairs
const zones = [
{ name: ‘bed’, x: 200, y: 300, width: 200, height: 100, color: null },
{ name: ‘armchair1’, x: 450, y: 350, width: 80, height: 100, color: null },
{ name: ‘armchair2’, x: 550, y: 350, width: 80, height: 100, color: null },
];

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

zones.forEach(zone => {
if (zone.color) {
ctx.fillStyle = zone.color;
ctx.globalAlpha = 0.4;
ctx.fillRect(zone.x, zone.y, zone.width, zone.height);
ctx.globalAlpha = 1.0;
}
});
}

canvas.addEventListener(‘click’, (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX – rect.left;
const y = e.clientY – rect.top;

const clickedZone = zones.find(zone =>
x >= zone.x && x = zone.y && y {
draw();
};

Source link