HTML Canvas Graphics is a powerful feature of HTML that allows developers to create dynamic graphics and animations directly within a web page. The <canvas> element is used to create the graphics area, which can be styled with CSS just like any other element.
To create graphics on a canvas, developers use JavaScript to draw shapes, lines, text, and images onto the canvas. The canvas element provides a set of drawing commands that can be used to manipulate the pixels within the canvas.
Here is an example of how to create a canvas element and draw a rectangle on it using JavaScript:
php
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 200, 100);
</script>
In the example above, the <canvas> element is given an ID of “myCanvas” and a width and height of 200 pixels by 100 pixels. The JavaScript code then uses the canvas.getContext(“2d”) method to get a reference to the 2D rendering context for the canvas. The fillStyle property is set to red (#FF0000) and the fillRect() method is used to draw a rectangle at the top left corner of the canvas with a width of 200 pixels and a height of 100 pixels.
There are many other drawing commands available for use with the canvas element, such as stroke(), which draws an outline around a shape, and fillText(), which draws text onto the canvas.
In addition to drawing shapes and text, developers can also use the canvas element to manipulate images. The canvas API includes methods for loading images onto the canvas, cropping and scaling images, and applying filters and effects.
Overall, HTML Canvas Graphics provides developers with a powerful and flexible way to create dynamic and engaging graphics and animations directly within a web page. With the right tools and techniques, the possibilities for creating stunning visual experiences are endless.
- Draw “Hello” Text:
php
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello", 10, 50);
</script>
</body>
</html>
- Draw Circular Gradient:
php
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circular Gradient Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI);
ctx.fill();
</script>
</body>
</html>
- Draw Linear Gradient:
php
<!DOCTYPE html>
<html>
<head>
<title>Canvas Linear Gradient Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);
</script>
</body>
</html>
- Draw a Text:
php
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.fillText("Hello World", 100, 50);
</script>
</body>
</html>
- Draw Circle:
php
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circle Example</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>