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>
Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do the drawing.
Draw a line
Example
<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
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>
Draw a Text
Example
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
Stroke Text
Example
<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
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>
Draw Circular Gradient
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>
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>
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>
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