Graphics Canvas Introduction

Graphics canvas allows animating our page inside the canvas with the help of JavaScript code.

Before Using to Graphics Canvas - We need to know basic informations about HTML/CSS, and JavaScript. Canvas design looks like the animated design, BUT it is not animated, just simple use of canvas tag, we just pass the ID in canvas tag. we can call JavaScript file into the canvas with the help of ID.

We can draw colorful Circle, Text, and Rectangle without animations with the help of canvas tag.

Guide, How to use Canvas

  • First of all Add canvas in HTML
  • Draw the Line, Rectangle, Circle, Text, Coordinates,Image and Gradients into the canvas tag.
  • We can styled font-size, family, position etc.
  • Draw on the canvas like - Height, Width & Color options
  • Enable JavaScript drawing methods on the canvas, Use ID attribute.
  • Use X and Y Coordinate of drawn item.

Browser Support HTML5 Graphics Canvas

Element Chrome Edge Firefox Safari Opera
<canvas> 4.0 9.0 2.0 3.1 9.0
  • The <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers.
  • The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property.

Can be Use HTML5 Canvas for animation & Game

  • Yes, Canvas method use for animations
  • It respond to JavaScript Events
  • It Offers a lot of posibilities for html gaming applications


We are optimized for learning and job information. We try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content. Our Privacy & Policy →

© 2019 | All Rights Reserved