Author
Canvas API is used to draw graphics, shapes, images, and animations directly in the browser using JavaScript.
It is widely used for games, charts, visual effects, and animations.
The <canvas> element provides a drawing area inside the web page.
Unlike an image, you can draw anything dynamically with code.
Example:
<canvas id="myCanvas" width="300" height="200" style="border:1px solid black;">
Your browser does not support canvas.
</canvas>This creates a blank canvas with width 300px and height 200px.Accessing the Drawing Context.
To draw, you must access the 2D drawing context.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D context
</script>Rectangles
<script>
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 50); // x, y, width, height
ctx.strokeStyle = "red";
ctx.strokeRect(150, 20, 100, 50);
ctx.clearRect(30, 30, 40, 20); // erase part of rectangle
</script>Lines and Paths
<script>
ctx.beginPath();
ctx.moveTo(20, 120); // starting point
ctx.lineTo(200, 120); // end point
ctx.stroke();
</script>Circles (using arc)
<script>
ctx.beginPath();
ctx.arc(100, 150, 40, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();
</script>
Fill and Stroke
ctx.fillStyle = "orange";
ctx.fillRect(50, 50, 100, 80);
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.strokeRect(200, 50, 100, 80);
Gradients
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(20, 200, 250, 80);
Adding Text
ctx.font = "24px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello Canvas", 50, 50);
ctx.strokeStyle = "black";
ctx.strokeText("Outline Text", 50, 100);
Working with Images
const img = new Image();
img.src = "example.jpg";
img.onload = () => {
ctx.drawImage(img, 20, 20, 150, 100); // draw image
};
You can also crop images using more drawImage() parameters.
Transformations
ctx.translate(200, 200); // move origin
ctx.rotate(Math.PI / 4); // rotate 45 degrees
ctx.fillStyle = "purple";
ctx.fillRect(-50, -50, 100, 100); // rotated square
Animations with Canvas
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear old frame
ctx.fillStyle = "red";
ctx.fillRect(x, 50, 50, 50);
x += 2; // move right
requestAnimationFrame(animate); // keep animating
}
animate();
? Used in games and visual effects.
Pixel Manipulation
const imageData = ctx.getImageData(0, 0, 100, 100);
console.log(imageData.data); // RGBA pixel values
? Can be used for filters like grayscale, brightness, etc.
Canvas Compositing
ctx.globalAlpha = 0.5; // transparency
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);
ctx.globalCompositeOperation = "lighter"; // blend mode
ctx.fillStyle = "red";
ctx.fillRect(80, 80, 100, 100);