Working on New Graphics Elements
×
Home Courses Community Support
Working on New Graphics Elements

HTML5 have announced two new graphic elements Canvas and SVG.

Graphics with Canvas

<canvas> tag is used to draw graphics in HTML. Canvas give best result with JavaScript. It is only a container of graphics. We need to use JavaScript to draw box, circle, text etc.

Syntax for canvas-

<canvas id="CanvasID" width="200" height="100"></canvas>

 

The above code will display noting because no JavaScript is written for canvas, and canvas has no border by default.
 

enlightenedUse an ID for canvas is mendatory to use JavaScript.


Let's draw a rectabgle using canvas-

<!DOCTYPE html>
<html>
<body>
<canvas id="js" width="300" height="150" style="border:10px solid #0080C0;">
Your browser does not support the canvas tag. Please update your browser to work on canvas.
</canvas>
<script>
var c = document.getElementById("js");
var rect = c.getContext("2d");
rect.fillStyle = "#859FFA";
rect.fillRect(10,10,280,130);
</script>

</body>
</html>


Output of the above code will be like below image-



Likely, above code we can use any JS as per the requirement of canvas.

enlightenedText written between canvas tags will be display if the browser will not support canvas tag.

 

Graphics with SVG

SVG is a W3C recommendation stands for Scalable Vector Graphics. We can draw any image i.e. circle, rectangle etc with the help of SVG.

See below code to draw a circle-

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
  <circle cx="80" cy="80" r="60"
  stroke="blue" stroke-width="6" fill="orange" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>


Output of the above code is given below-


Likely, circle we can draw any graphics with SVG.

 

← Preview

Introduction to HTML5

Next →

Audio and Video with HTML 5

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App