HTML Graphics, HTML Canvas, HTML SVG in detail with examples

HTML Graphics, HTML Canvas, HTML SVG in detail with examples

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.

<canvas id="myCanvas" width="200" height="100"></canvas>
Enter fullscreen mode
Exit fullscreen mode

Add a JavaScript

After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Draw a line

Image description

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Enter fullscreen mode
Exit fullscreen mode

Draw a Circle

Image description

Example

<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>
Enter fullscreen mode
Exit fullscreen mode

Draw a Text

Image description

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Enter fullscreen mode
Exit fullscreen mode

Stroke Text

Image description

Example

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
Enter fullscreen mode
Exit fullscreen mode

Draw Linear Gradient

Image description

Example

<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>
Enter fullscreen mode
Exit fullscreen mode

Draw Circular Gradient

Image description

Example

<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>
Enter fullscreen mode
Exit fullscreen mode

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

<!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>
Enter fullscreen mode
Exit fullscreen mode

Example

<!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>
Enter fullscreen mode
Exit fullscreen mode

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


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

    Leave a Reply

    Your email address will not be published. Required fields are marked *