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.
Syntax:
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var ctx = canvas.getContext('2d');
Create A Rectangle
This example demonstrates how to draw a simple rectangle on the
canvas.
Example 1:
<!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');
ctx.fillStyle = '#FF0000';
ctx.fillRect(50, 50, 150, 100);
</script>
</body>
</html>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(50, 50, 150, 100);
</script>
</body>
</html>
Output:
Create A Circle
This example shows how to draw a circle using the arc method.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circle Example</title>
<html>
<head>
<title>Canvas Circle Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<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');
ctx.beginPath();
ctx.arc(250, 200, 100, 0, 2 * Math.PI);
ctx.strokeStyle = '#00FF00';
ctx.stroke();
ctx.fillStyle = '#0000FF';
ctx.fill();
</script>
</body>
</html>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(250, 200, 100, 0, 2 * Math.PI);
ctx.strokeStyle = '#00FF00';
ctx.stroke();
ctx.fillStyle = '#0000FF';
ctx.fill();
</script>
</body>
</html>
Output:
Create A Text
This example demonstrates how to draw text on the canvas.
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Example</title>
<html>
<head>
<title>Canvas Text Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
<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');
ctx.font = '30px Arial';var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF00FF';
ctx.fillText('Hello, Canvas!', 50, 100);
</script>
</body>
</html>
Output:
Create A Gradient
This example shows how to create and use linear gradients.
Example 4:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Gradient Example</title>
<html>
<head>
<title>Canvas Gradient Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:2px solid #000000;"></canvas>
<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 gradient =
ctx.createLinearGradient(0, 0, 500, 400);var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#0000FF');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 400);
</script>
</body>
</html>
Output:
Create A Image
This example shows how to draw an image on the canvas.
Example 5:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Image Example</title>
<html>
<head>
<title>Canvas Image Example</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:2px solid #000000;"></canvas>
<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 canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img
= new Image();
img.onload = function() {
ctx.drawImage(img, 50, 50, 200, 150);
};
img.src = 'path_to_your_image.jpg';
</script>
</body>
</html>
img.onload = function() {
ctx.drawImage(img, 50, 50, 200, 150);
};
img.src = 'path_to_your_image.jpg';
</script>
</body>
</html>
Output:
More topic in HTML
