HTML Canvas
The HTML <canvas> element is a versatile element used for drawing graphics on the fly via JavaScript. It provides a space in the browser where you can dynamically create graphics, such as charts, animations, or even game graphics.
Basic Usage
To use the <canvas> element, you need to define its width and height, and then use JavaScript to draw on it. The canvas element itself is just a container; drawing is handled through the Canvas API.
Syntax:
<canvas id="myCanvas" width="500" height="400"></canvas>
JavaScript Context
To draw on the canvas, you need to obtain the "context" of the canvas, which is an object that provides methods and properties for drawing.
JavaScript:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var ctx = canvas.getContext('2d');
Example 1: Drawing a Rectangle
This example demonstrates how to draw a simple rectangle on the canvas.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:3px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a filled rectangle
ctx.fillStyle = '#FF0000'; // Red color
ctx.fillRect(50, 50, 150, 100); // x, y, width, height
</script>
</body>
</html>
Output:
Example 2: Drawing a Circle
This example shows how to draw a circle using the arc method.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circle Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a circle
ctx.beginPath(); // Start a new path
ctx.arc(250, 200, 100, 0, 2 * Math.PI); // x, y, radius, start angle, end angle
ctx.strokeStyle = '#00FF00'; // Green color
ctx.stroke(); // Draw the outline of the circle
ctx.fillStyle = '#0000FF'; // Blue color
ctx.fill(); // Fill the circle
</script>
</body>
</html>
<html>
<head>
<title>Canvas Circle Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw a circle
ctx.beginPath(); // Start a new path
ctx.arc(250, 200, 100, 0, 2 * Math.PI); // x, y, radius, start angle, end angle
ctx.strokeStyle = '#00FF00'; // Green color
ctx.stroke(); // Draw the outline of the circle
ctx.fillStyle = '#0000FF'; // Blue color
ctx.fill(); // Fill the circle
</script>
</body>
</html>
Output:
Example 3: Drawing Text
This example demonstrates how to draw text on the canvas.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw text
ctx.font = '30px Arial';
ctx.fillStyle = '#FF00FF'; // Magenta color
ctx.fillText('Hello, Canvas!', 50, 100); // Text, x, y
</script>
</body>
</html>
<html>
<head>
<title>Canvas Text Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Draw text
ctx.font = '30px Arial';
ctx.fillStyle = '#FF00FF'; // Magenta color
ctx.fillText('Hello, Canvas!', 50, 100); // Text, x, y
</script>
</body>
</html>
Output:
Example 4: Drawing a Gradient
This example shows how to create and use linear gradients.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Gradient Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Create a linear gradient
var gradient = ctx.createLinearGradient(0, 0, 500, 400);
gradient.addColorStop(0, '#FF0000'); // Start color
gradient.addColorStop(1, '#0000FF'); // End color
// Apply the gradient to a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 400); // Fill the entire canvas with the gradient
</script>
</body>
</html>
Output:
Example 5: Drawing an Image
This example shows how to draw an image on the canvas.
<!DOCTYPE html>
<html>
<head>
<title>Canvas Image Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:2px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 50, 50, 200, 150); // x, y, width, height
};
img.src = 'path_to_your_image.jpg'; // Provide the path to your image
</script>
</body>
</html>
Output:
