Open the browser console (F12 → Console tab). Type JavaScript live:
2 + 2 // 4
"hello".toUpperCase() // "HELLO"
typeof 42 // "number"
typeof "hello" // "string"
Open src/scripts/app.js. Read it top to bottom. Don't try to understand everything — get the general shape.
Find errors: the console shows red error messages from PixelCraft's JavaScript. Read them.
const canvasWidth = 1920;
const canvasHeight = 1080;
let currentFilter = "none";
let brightness = 0;
console.log("Canvas size:", canvasWidth, "x", canvasHeight);
console.log("Total pixels:", canvasWidth * canvasHeight);
console.log("Memory needed:", canvasWidth * canvasHeight * 4, "bytes");
Operators: + (add), - (subtract), * (multiply), / (divide), % (remainder), ** (power)
A variable is used before it's declared → ReferenceError
Fix it: move the variable declaration before its first use.
Add console.log statements to trace what runs when the page loads:
console.log("Step 1: Page loaded");
console.log("Step 2: Canvas initialized");
console.log("Step 3: Buttons should be wired...");
// Your logs reveal: Step 3 never prints!
// Something breaks before it.
Variables are named memory locations.
const width = 1920 tells the computer: "Reserve a spot in RAM, put 1920 there, label it 'width'."