The HTML <canvas> element is used to draw graphics using scripting langungage like javascript
canvas tag is used like as container we can use the script to draw the graphics.
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
The following table elaborates the difference between svg and Canvas
| Canvas | SVG |
|---|---|
| Resolution dependent | Resolution independent |
| Canvas Uses Pure Scripting | SVG Relies on Files |
| Canvas Manipulates Pixels | SVG Is Vector-based, |
| Canvas is a bitmap with an “immediate mode” graphics application programming interface (API) for drawing on it | SVG is known as a “retained mode” graphics model persisting in an in-memory model |
| Canvas is a “fire and forget” model that renders its graphics directly to its bitmap and then subsequently has no sense of the shapes that were drawn; only the resulting bitmap stays around. | SVG builds an object model of elements, attributes, and styles. When the svg element appears in an HTML5 document, it behaves like an inline block and is part of the HTML document tree. |
| Single HTML element similar to img in behavior | Object Model-based (SVG elements are similar to HTML elements) |
| Well suited for graphic-intensive games | Not suited for game applications |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<!DOCTYPE html>
<html>
<body>
<p style='color:white'>SVG</p>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
<p style='color:white'>Canvas</p>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
</BODY>
</HTML>
OUTPUT:
SVG
Canvas
Posts
No comments:
Post a Comment