home

HTML5 Canvas Elements

Before you are starting this you should have some basic understanding of HTML and JavaScript.
This section contains HTML5 graphics introduction and samples codes with live demos. Canvas Element is invented by Apple for Safari and Google Chrome browsers. Later developed by and released by WhatWG now most of the people known Canvas as an HTML5 Element.

The Main use of Canvas is to CREATE GRAPHICS and teach about coordinations like Paths, Texts, Gradients, Pictures, 3D, 2D and many more.

Check below section with examples and demos, that can explain how to create Rectangles, Rounded Rectangles, Circles, gradient rectangle, images, etc.

Canvas
Canvas Coordinates
Canvas Paths
Canvas Text
Canvas Gradients
Canvas Images

HTML5 Semantic Elements StructureThe canvas element is used to create graphics on the fly, on a web page, any graphics object is a child object for the canvas. Canvas is a container for storing graphics on the fly with the combination of JavaScript (it's like wrapper div in HTML for storing all objects).

Here is a simple <canvas> element which has only two specific attributes width and height, and default size of the canvas is width:300px height:150px, Css can manage custom sizes using height and width property also all the core HTML5 attributes like id and class., it almost like <img> tag except alt and src attributes everything is similar.

Lets Starts with Following example code defines <canvas> element (with Default Attributes)

<canvas id="graphic" width="300" height="150"></canvas>
Document Structure

HTML5 can create any type of custome shapes, how you want, here we have a demo with custom symbol, to create that symbol we used some css styles. Here is a Document structure including all main parent elements like html, header, title, Canvas, styles with all closing tags.

<html>
<head>
<title>Canvas tutorial</title>
<script>
  var canvas = document.getElementById("CCustome");
  var ctx = canvas.getContext("2d");
  // begin custom shape
  ctx.beginPath();
  ctx.moveTo(120, 50);
  ctx.bezierCurveTo(41, 0, 50, 100, 100, 150);
  ctx.bezierCurveTo(250, 0, 50, 0, 100, 150);
// complete custom shape ctx.closePath(); ctx.lineWidth = 5; ctx.fillStyle = "red"; ctx.fill(); </script> <style type="text/css"> canvas{ border: 2px solid #000000; }
</style>
</head>
<body onload="draw();">
<canvas id="graphic" width="300" height="150"></canvas>
</body>
</html>
Canvas element is support all new major browser and older browser not support.

Canvas Coordinates

Drawing ant object first things is to set coordination of the document (grid). The canvas is a two-dimensional grid that in the upper-left corner of the canvas has coordinate (0,0), the fillRect() method above had the parameters (0,0,150,150). This means: Start at the upper-left corner (0,0) and draw a 150x150 pixels rectangle. Check this picture i will come to know everything about canvas Coordinates.

Canvas Paths

A path is the trigger in creating canvas objects from starting point to ending point, like if you want to create a rectangle, rounded circle, line, picture or more anythings is possible, but things are you need to manage everything to giving paths, a path can create your thoughts. it will bring to live.

Creating Canvas Rectangle

Following code is about drawing a rectangle with using canvas paths, everything is inbuilt by the main canvas element based on canvas id (myCanvasPath) all object can handle using canvas methods and properties (fillRect, clearRect, strokeRect), Check below demo with some rectangle box with the border.

<canvas id="myCanvasPaths" width="200" height="100"></canvas> 
      var c=document.getElementById("myCanvasPaths");
      var ctp=c.getContext("2d");
      ctp.moveTo(0,0);
      ctp.stroke();
      ctp.fillRect(25,25,100,100);
      ctp.clearRect(45,45,60,60);
      ctp.strokeRect(50,50,50,50);
Creating Canvas Rounded Circle

The following code is used to draw Rounded Circle, you fill this code is length, but simple storing every thing in the different variable with properties.

<canvas id="myCanvas" width="200" height="100"></canvas>
      
<script>
var canvas = document.getElementById("myCanvas");
var crc = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70; context.beginPath();
crc.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
crc.fillStyle = "green";
crc.fill();
crc.lineWidth = 5;
crc.strokeStyle = "#003300";
crc.stroke();
</script

This another method for creating Rounded Circle

var canvas = document.getElementById("myCanvas");
var crc = canvas.getContext("2d");
crc.beginPath();
crc.arc(60,60, 50, 0, 2 * Math.PI);
crc.fillStyle = "#ff0000";
crc.fill();
crc.lineWidth = 5;
crc.strokeStyle = "#000000";
crc.stroke();
Rounded Circle Demo

To draw a circle, we must use one of the "ink" methods, like stroke() or fill(), Here we used fill method.

Creating Canvas Triangle

Following code use to draw Triangle shape,

<canvas id="TriangleCanvas"></canvas>
      var canvas = document.getElementById("TriangleCanvas");
if (canvas.getContext){
var cts = canvas.getContext("2d"); ctx.beginPath(); cts.moveTo(75,50);
cts.lineTo(100,75);
cts.lineTo(100,25);
cts.fill();
}

Canvas Text

Canvas can draw text and most used properties and methods are:

<canvas id="myCTeaxt" height="70"></canvas>
  var canvas = document.getElementById("myCTeaxt");
var ctext = canvas.getContext("2d");
ctext.font = "40pt Calibri";
ctext.lineWidth = 1;
// stroke color
ctext.fillStyle = "#c7c7c7";
ctext.fillText("Canvas Text", 32, 50);
ctext.strokeStyle = "red";
ctext.strokeText("Canvas Text", 30, 50);

Canvas Gradients

Gradients can make look good, it means Multiple colors combination. Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
Two different types of gradients are there:

Creating Linear Gradient

Following code about LinearGradient,

<canvas id="myLG" width="200" height="100"></canvas>
var c=document.getElementById("myLG");
var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"orange");
grd.addColorStop(1,"white"); ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Creating Radial Gradient
<canvas id="myRG" width="200" height="100"></canvas>
var c=document.getElementById("myRG");
var ctx=c.getContext("2d"); // Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white"); // Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas Images

To draw canvas image using html5 with using drawImage method which requires object and destination point(defines top left corner), and inside imageObj function there is a drawImage which will set the image position inside the canvas object, src is the path tracker for the image element.

<canvas id="myimg"></canvas>
var canvas = document.getElementById("myimg");
var context = canvas.getContext("2d");
var imageObj = new Image(); imageObj.onload = function() {
context.drawImage(imageObj, 9, 50);
};
imageObj.src = "http://www.ustutorials.com/includes/images/us-tutorials-main-logo.png";