Creative
Canvas Design
Create interactive canvas-based designs and visualizations. Use when users need HTML5 Canvas applications, interactive graphics, data visualizations, or creative coding projects.
Create interactive canvas-based designs and visualizations. Use when users need HTML5 Canvas applications, interactive graphics, data visualizations, or creative coding projects.
Create interactive canvas-based designs and visualizations using HTML5 Canvas API.
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
</script>
Shapes:
// Rectangle
ctx.fillRect(x, y, width, height);
ctx.strokeRect(x, y, width, height);
// Circle
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.fill();
// Line
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
Colors and Styles:
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
ctx.lineWidth = 2;
ctx.globalAlpha = 0.8;
function animate() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update state
// Draw objects
requestAnimationFrame(animate);
}
animate();
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// Handle click
});
canvas.addEventListener('mousemove', (e) => {
// Track mouse position
});
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.life = 1;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.life -= 0.01;
}
draw(ctx) {
ctx.globalAlpha = this.life;
ctx.fillRect(this.x, this.y, 2, 2);
}
}
function drawBarChart(data, x, y, width, height) {
const barWidth = width / data.length;
const maxValue = Math.max(...data);
data.forEach((value, i) => {
const barHeight = (value / maxValue) * height;
ctx.fillRect(
x + i * barWidth,
y + height - barHeight,
barWidth - 2,
barHeight
);
});
}
requestAnimationFrame for smooth animations