Html5 Canvas | Lessoncup Programming Blog

Saturday, 16 April 2016

Html5 Canvas

Hi in this tutorial we will learn about Html5 Canvas, the canvas is a html5 new feature use to draw Graphics on webpages using JavaScript, you can start drawing using <canvas> element but you must know about JavaScript The Canvas html element have only two attributes width and height

and we can style the canvas element using CSS Style Sheets. The canvas feature supports all major browsers, using canvas feature we can draw 2d graphics like shapes, lines, text, image compositions and simple animations, gradients, The Html Canvas is a two dimensional grid X and Y

What is Best in HTML5 Canvas

The Canvas element is fully user friendly like other html elements and it is interact with all events like Mouse and Keyboard

We can easily manage the Canvas element with JavaScript code and it is very flexible to create anything using Canvas like graphics shapes and gradients

Once you built any Canvas application you can reuse in other applications like Flash

We can built 2d and 3d Games

Web based Animated banner ads without using any Flash Content

Rendering Contexts, every HTML5 Canvas element have contexts and contexts tell what Html5 Canvas API you using

Creating Canvas Element

<canvas id="myCanvas" width="600" height="300">

    <p>Your browser doesn’t support HTML5 Canvas. 
    Please check canvas for information on 
    browser support for canvas.</p>


Find the Canvas Using JavaScript

You can Access the Html elements using JavaScript

var myCanvas = document.getElementById("myCanvas");


Creating a Drawing Object

for creating drawing object 2d or 3d use getContext() object this object have methods and properties

var myCanvas = document.getElementById("myCanvas");

var draw = myCanvas.getContext("2d");


Drawing Simple Rectangle 

the bellow code draw a Rectangle the fillStyle() property used to fill the color and fillRect() property used to draw a shape with given values this method have four properties X position Y position Width and Height

var canvas = document.getElementById("myCanvas");

var draw = canvas.getContext("2d");

draw.fillStyle = "#F60";




  1. Here i had read the content you had posted. It is much interesting so please keep update like this.School web design uk

    1. Great Article Image Processing Projects

      Deep Learning Projects for Final Year

      JavaScript Training in Chennai

      JavaScript Training in Chennai

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

  2. Hi, Really great effort. Everyone must read this article. Thanks for sharing.

  3. Great, Keep it up! I really like your writing skills.

  4. Quickly drawn by essayist's restrictive method for composing.

  5. Thank you for your suggestion. I was searching like this about two days.
    online classified ads platform in Bangladesh


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons