My Photos
Travels
We love to travel
Nantian Temple
Our visit to Nan Tian Temple
We love Pizza 😍
We all really love pizza, this is a photo of us in Bangalore
My Art Projects
Kittys
My sister made this animation
–
DAYS
–
HOURS
–
MINUTES
–
SECONDS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing App</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="600"></canvas>
<button id="colorButton">Change Color</button>
<button id="eraserButton">Eraser</button>
<button id="penWidthButton">Change Pen Width</button>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let drawing = false;
let colorIndex = 0;
let penWidth = 5;
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'lightblue', 'lime', 'indigo', 'violet', 'pink', 'purple', 'brown', 'black'];
let isEraser = false;
canvas.addEventListener('mousedown', () => {
drawing = true;
});
canvas.addEventListener('mouseup', () => {
drawing = false;
ctx.beginPath();
});
canvas.addEventListener('mousemove', draw);
function draw(event) {
if (!drawing) return;
ctx.lineWidth = penWidth;
ctx.lineCap = 'round';
ctx.strokeStyle = isEraser ? 'white' : colors[colorIndex];
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
document.getElementById('colorButton').addEventListener('click', () => {
colorIndex = (colorIndex + 1) % colors.length;
isEraser = false;
});
document.getElementById('eraserButton').addEventListener('click', () => {
isEraser = true;
});
document.getElementById('penWidthButton').addEventListener('click', () => {
penWidth = prompt("Enter new pen width:", penWidth);
});
</script>
</body>
</html>