HTML Graphics, HTML Canvas, HTML SVG in detail with examples
Tags: webdev, javascript, html, learning
Published: 2024-06-25 10:28:04

## **HTML Graphics**
HTML graphics contains:
HTML Canvas
HTML SVG
## **What is HTML Canvas?**
The HTML `<canvas>` element is used to draw graphics, on the fly, via JavaScript.
## **Canvas Examples**
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
```HTML
<canvas id="myCanvas" width="200" height="100"></canvas>
```
## **Add a JavaScript**
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
## **Draw a line**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38kqdrkhc9qdholpix7l.png)
## **Example**
```JavaScript
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
```
## **Draw a Circle**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdt666m3eyummscvrepj.png)
## **Example**
```JavaScript
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
```
## **Draw a Text**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nwaq9k6ms1d94uxfgms.png)
## **Example**
```JavaScript 
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
```
## **Stroke Text**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99wvncrdm71xolh8i82o.png)
## **Example**
```JavaScript
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
```
## **Draw Linear Gradient**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwzsj9dtuiz0nn0ggira.png)
## **Example**
```JavaScript
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
```
## **Draw Circular Gradient**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uins6byo77fn0ycj0toc.png)
## **Example**
```JavaScript
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
```
## **SVG (Scalable Vector Graphics)**
SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages.
## **The `<svg>` Element**
The HTML `<svg>` element is a container for SVG graphics.
SVG has several methods for drawing paths, rectangles, circles, polygons, text.
## **SVG Circle**
## **Example**
```HTML
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
```
## **Example**
```HTML
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
```
## **Comparison of SVG and Canvas**
The table below shows some important differences between Canvas and SVG:
## **SVG**
Resolution independent
Support for event handlers
Good text rendering capabilities
Slow rendering if complex
Not suited for game applications
## **Canvas**
Resolution dependent
No support for event handlers
Poor text rendering capabilities
You can save the resulting image as .png or .jpg
Well suited for graphic-intensive games