Hereβs a compact pixel-art editor that matches your specs and stays under 50 lines.
---
### `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Art Canvas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```
---
### `sketch.js`
```js
let cols=16, rows=16, cell=20, grid=[], palette=["black","white","red","orange","yellow","green","blue","purple"], cur=0;
function setup(){
createCanvas(cols*cell, rows*cell+40);
for(let i=0;i<rows;i++){ grid[i]=[]; for(let j=0;j<cols;j++) grid[i][j]=color(255); }
noSmooth();
}
function draw(){
background(255);
stroke(220);
for(let i=0;i<rows;i++) for(let j=0;j<cols;j++){
fill(grid[i][j]);
rect(j*cell,i*cell,cell,cell);
}
for(let i=0;i<palette.length;i++){
fill(palette[i]);
stroke(i==cur?0:220);
strokeWeight(i==cur?3:1);
rect(i*width/palette.length,rows*cell,width/palette.length,40);
}
strokeWeight(1);
}
function paint(){
if(mouseY<rows*cell){
let c=floor(mouseX/cell), r=floor(mouseY/cell);
if(c>=0&&c<cols&&r>=0&&r<rows) grid[r][c]=palette[cur];
}else if(mouseY<height){
let i=floor(mouseX/(width/palette.length));
if(i>=0&&i<palette.length) cur=i;
}
}
function mousePressed(){ paint(); }
function mouseDragged(){ paint(); }
function keyPressed(){
if(key=='c'||key=='C')
for(let i=0;i<rows;i++) for(let j=0;j<cols;j++) grid[i][j]=color(255);
}
```
Key details:
- Canvas: `320Γ360` β 16Γ16 grid of `20Γ20` pixels + 40px palette strip.
- Painting: click or drag (`mousePressed` / `mouseDragged`) paints the square under the cursor with the current color ([mouse events ref](https://p5js.org/reference/#/p5/mousePressed)).
- Palette: 8 colors at the bottom; clicking changes `cur` and shows a thicker black border on the selected color.
- Clear: press `C` or `c` to reset all cells to white ([keyPressed ref](https://p5js.org/reference/#/p5/keyPressed)).
- Grid lines: light gray (`stroke(220)`) over a white background.
