JavaScript Canvas globalAlpha Tutorial
Learn how to use JavaScript Canvas globalAlpha property effectively with examples and detailed explanations. Enhance your web development skills with this step-by-step tutorial.
JavaScript Canvas globalAlpha Tutorial
last modified April 3, 2025
In this article, we explore the Canvas globalAlpha property in JavaScript. This property controls transparency for all drawing operations on the canvas. Mastering globalAlpha is crucial for creating sophisticated visual effects.
Basic Definition
The globalAlpha property sets the transparency value for the entire canvas. It accepts values between 0.0 (fully transparent) and 1.0 (fully opaque). This affects all subsequent drawing operations until changed.
Unlike rgba colors which affect individual elements, globalAlpha applies uniform transparency to everything drawn after it’s set. It’s useful for creating layered effects and fading animations.
Basic globalAlpha Usage
This example demonstrates how to draw shapes with different transparency levels.
index.html
<!DOCTYPE html> <html> <head> <title>Basic globalAlpha</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
// Opaque rectangle
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// Semi-transparent circle
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body> </html>
In this basic example, we first draw a fully opaque red rectangle. Then we set globalAlpha to 0.5 (50% transparent) before drawing a blue circle.
The circle appears semi-transparent, allowing the background (or any underlying shapes) to show through. This demonstrates globalAlpha’s basic functionality.
Layered Transparency
This example shows how globalAlpha affects overlapping shapes differently.
index.html
<!DOCTYPE html> <html> <head> <title>Layered Transparency</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
// Background
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// First layer (more transparent)
ctx.globalAlpha = 0.3;
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 200, 100);
// Second layer (less transparent)
ctx.globalAlpha = 0.7;
ctx.fillStyle = 'blue';
ctx.fillRect(100, 80, 200, 100);
</script>
</body> </html>
Here we create a light gray background, then draw two overlapping rectangles with different transparency levels. The red rectangle is more transparent (0.3) than the blue one (0.7).
The result shows how globalAlpha affects the visibility of underlying layers. The blue rectangle appears more solid, while the red one shows more background.
Fade Animation
This example demonstrates using globalAlpha to create a simple fade animation.
index.html
<!DOCTYPE html> <html> <head> <title>Fade Animation</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
let alpha = 0;
let direction = 0.01;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha = alpha;
ctx.fillStyle = 'green';
ctx.fillRect(100, 75, 100, 50);
alpha += direction;
if (alpha >= 1 || alpha <= 0) direction *= -1;
requestAnimationFrame(animate);
}
animate();
</script>
</body> </html>
This animation continuously fades a green rectangle in and out. The alpha value oscillates between 0 and 1, changing by 0.01 each frame.
The requestAnimationFrame method creates a smooth animation loop. The direction reverses when alpha reaches either extreme (0 or 1).
Image Transparency
This example shows how to apply globalAlpha to images drawn on canvas.
index.html
<!DOCTYPE html> <html> <head> <title>Image Transparency</title> </head> <body>
<canvas id=“myCanvas” width=“300” height=“200”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
// Draw opaque background
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw semi-transparent image
ctx.globalAlpha = 0.6;
ctx.drawImage(img, 50, 50, 200, 100);
};
</script>
</body> </html>
Here we load an image and draw it with 60% opacity (globalAlpha = 0.6) over a black background. The image appears semi-transparent, showing the background.
Note that we wait for the image to load using the onload event. This ensures the image is ready before we attempt to draw it.
Complex Layering
This example demonstrates complex layering with multiple globalAlpha values.
index.html
<!DOCTYPE html> <html> <head> <title>Complex Layering</title> </head> <body>
<canvas id=“myCanvas” width=“400” height=“300”></canvas>
<script> const canvas = document.getElementById(‘myCanvas’); const ctx = canvas.getContext(‘2d’);
// Background grid
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'lightgray';
ctx.lineWidth = 1;
for (let x = 0; x <= canvas.width; x += 20) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (let y = 0; y <= canvas.height; y += 20) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// Layer 1 - Red circle (low opacity)
ctx.globalAlpha = 0.3;
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(150, 150, 80, 0, Math.PI * 2);
ctx.fill();
// Layer 2 - Green square (medium opacity)
ctx.globalAlpha = 0.6;
ctx.fillStyle = 'green';
ctx.fillRect(200, 100, 120, 120);
// Layer 3 - Blue triangle (high opacity)
ctx.globalAlpha = 0.9;
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.moveTo(250, 200);
ctx.lineTo(350, 200);
ctx.lineTo(300, 100);
ctx.closePath();
ctx.fill();
</script>
</body> </html>
This complex example creates a grid background, then draws three shapes with different transparency levels. The red circle is most transparent (0.3), the green square is medium (0.6), and the blue triangle is nearly opaque (0.9).
The result shows how shapes interact through transparency. The grid is visible through all shapes, with varying clarity depending on each shape’s globalAlpha.
Source
MDN Canvas globalAlpha Documentation
In this article, we have explored various techniques for using globalAlpha to create transparency effects on HTML canvas. Mastering this property is essential for creating sophisticated visual effects in web applications.
Author
My name is Jan Bodnar, and I am a passionate programmer with extensive programming experience. I have been writing programming articles since 2007. To date, I have authored over 1,400 articles and 8 e-books. I possess more than ten years of experience in teaching programming.
List all JS Canvas tutorials.
