Canvas
The HTML element is used to draw graphics on the fly, via scripting (usually JavaScript). The element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Example: In this example, we will see the code for drawing a square using Canvas elements.
HTML
<!DOCTYPE html><html><head> <title>HTML5 Canvas Tag</title></head><body> <h2>Canvas Square(Geeks For Geeks)</h2> <canvas id="newCanvas" width="100" height="100" style="border:1px solid #000000;"> </canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0, 0, 100, 100); </script></body></html> |
Output:
Difference between SVG and HTML 5 Canvas
SVG (Scalable Vector Graphics) is an XML-based vector image format, suitable for creating graphics and interactive elements. HTML5 Canvas is more like a blank canvas where you can draw whatever you want using pixels. SVG is great for logos and icons, while Canvas is good for dynamic animations and games.