HTML Canvas Graphics

HTML Canvas is a powerful element that allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is used to draw graphics on a web page, which can be used for various purposes, such as creating animations, games, charts, and diagrams. The canvas element is part of the HTML5 specification and is supported by all modern browsers.

To start drawing on a canvas, you need to first create a canvas element in your HTML code using the <canvas> tag. You can then use JavaScript to access the canvas element and its properties and methods to draw various shapes, lines, curves, and images on the canvas.

Here are some of the commonly used HTML Canvas attributes and methods:

• width and height: These attributes define the size of the canvas in pixels. You can set them directly in the HTML code or use JavaScript to set them dynamically.
• getContext(): This method returns a rendering context object that provides methods for drawing on the canvas. You can specify the context type as "2d" for 2D graphics or "webgl" for 3D graphics.
• fillStyle and strokeStyle: These properties define the color, gradient, or pattern used to fill or stroke the shapes on the canvas.
• fillRect() and strokeRect(): These methods are used to draw a filled or outlined rectangle on the canvas. You need to specify the x and y coordinates of the top-left corner, as well as the width and height of the rectangle.
• beginPath() and closePath(): These methods are used to define a path for drawing shapes on the canvas. You can then use other methods such as moveTo(), lineTo(), arc(), and bezierCurveTo() to create the path.
• fill() and stroke(): These methods are used to fill or stroke the path you have defined on the canvas.
• drawImage(): This method is used to draw an image on the canvas. You need to specify the image source, as well as the x and y coordinates and the width and height of the image on the canvas.

Here are some of the most commonly used graphics functions in HTML Canvas:

Drawing Rectangles:

The canvas allows us to draw rectangles using the rect() method. This method requires four parameters, x, y, width, and height. The x and y parameters specify the position of the rectangle, while the width and height specify its dimensions.

Example:

HTML Code

<canvas id="myCanvas" width="200" height="200"></canvas>

JavaScript Code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();

Drawing Circles:

To draw a circle, we can use the arc() method. This method requires six parameters, x, y, radius, startAngle, endAngle, and anticlockwise. The x and y parameters specify the position of the center of the circle, while the radius specifies the radius of the circle.
 

Example:

HTML Code

<canvas id="myCanvas" width="200" height="200"></canvas>

JavaScript Code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Drawing Text:

The canvas also allows us to draw text using the fillText() and strokeText() methods. These methods require at least two parameters, the text to be drawn and the x and y coordinates of the text.
 

Example:

HTML Code

<canvas id="myCanvas" width="200" height="200"></canvas>

JavaScript Code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Drawing Images:

The canvas also allows us to draw images using the drawImage() method. This method requires at least three parameters, the image to be drawn, the x and y coordinates of the image.
 

Example:

HTML Code

<canvas id="myCanvas" width="200" height="200"></canvas>

JavaScript Code

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "image.png";
img.onload = function() {
 ctx.drawImage(img, 10, 10);
}

These are just a few examples of the many graphics functions available in HTML Canvas. With these tools, we can create a wide range of dynamic and interactive graphics in our web pages.