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.
Contact Us