How to Draw gradient using html5 Canvas

HTML5 Canvas Gradient tutorials

 

Learn and draw html5 Canvas Gradient using html5 Canvas

This step by step tutorial will teach you and make you able how to draw gradient using html5 canvas. This platform will also provides you step by step and an easy learning of html5 canvas image annotation, html5 canvas drag and drop, html5 canvas layers and all the topics of html5 canvas javascript framework with the help of step by step video and blogs tutorials. The play-list is also available on our youtube channel.

HTML5 Canvas Gradient Introduction:

In HTML5 canvas we can fill shapes and text and also we can stroke
text and shapes.When we draw text or shapes, it uses current fill or stroke style.
This fill or stroke can take any one value from three type of values.

  • color
  • pattern
  • gradient

HTML5 Canvas Gradient

Gradient consists of continuous color transition from one point to another point along a vector.This transition can be extended to other points along
the same vector.
HTML5 canvas (2D) supports two kind of gradient.

  • linear
  • radial

HTML5 Canvas Linear Gradient

A linear Gradient defines color change between two points
along a line.linearGradient can be created by calling
linearGradient() method.
The above method syntax is.

Syntax:


var gradient = context.createLinearGradient(x0,y0,x1,y1);

This method createLinearGradient() takes four parameters.

1. x0

x0 is the x-coordinate(in pixels) of the start point of the gradient.

2. y0

y0 is the y-coordinate of the start point of
gradient

3. x1

x1is the x-coordinate(in pixels),of the end
point of the gradient.

4. y1

y1is the y-coordinate(in pixels),of the end
point of the gradient.
After setting two point between those gradient will br created.
Next step is to set the color of gradient and its point of stop.
For this purpose we use method addColorStop().
At leat two colorStop are needed to create a linear gradient.The syntax
for creating color stop is.

Syntax:


gradient.addColorStop(offset,color);

This method addColorStop()takes two parameters.

offSet

offSet represent the position of gradient.Its value is between
0.0 to 1.0.The value 0.0 is the beginning of gradient and 1.0 is the
end of gradient.

2. color

This represent the css color string.It set the value of color of gradient.

————————————————–

Code of HTML5 Canvas linear Gradient 



<!DOCTYPE html>  
<html> 
<head>  
<title>HTML5 Canvas - Linear gradient example</title>  
</head>  
<body>  
<canvas id="myCanvas" width="600" height="400">
</canvas>  
<script>  
var canvas = document.getElementById("myCanvas");    

var  context = contextcanvas.getContext("2d");           
var gradient = context.createLinearGradient(10, 500, 200, 200);  
gradient.addColorStop(0, 'white');  
gradient.addColorStop(1, 'black');  
context.fillStyle = gradient;  
context.fillRect(10, 10, 500, 200);               

</script>  
</body>   
</html> 

————————————————–
========================================================

HTML5 Canvas Linear Gradient

html5 Canvas Linear Gradient tutorial

=========================================================
—————————————————-

live demo html5 Canvas linear Gradient on codepen

[codepen_embed height=500 theme_id=1 slug_hash=’myBbyK’ user=’aslamwaqar’ default_tab=’html’

animations=’run’]

[/codepen_embed]

—————————————————-

linear gradient rainbow demo using html5 canvas

—————————————————-



<!DOCTYPE html>
<html>
    <head>
        <title>Drawing </title>
    </head>
    <body>
        <canvas id ="myCanvas" width ="600" height ="400">
            style="border: 1px solid blue;"
        </canvas>
        <script>
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            var gradient = context.createLinearGradient(10, 0, 500, 0);
            gradient.addColorStop(0, 'red');
            gradient.addColorStop(1 / 6, 'orange');
            gradient.addColorStop(2 / 6, 'yellow');
            gradient.addColorStop(3 / 6, 'green');
            gradient.addColorStop(4 / 6, 'blue');
            gradient.addColorStop(5 / 6, 'indigo');
            gradient.addColorStop(1, 'violet');
            context.fillStyle = gradient;
            context.fillRect(0, 0, 500, 300);
        </script>
    </body>
</html>

———————————————————

========================================================

Html5 Canvas linear Gradient

HTML5 canvas lineargradient
=========================================================
—————————————————-
linear gradient code demo at code pen

[codepen_embed height=500 theme_id=1 slug_hash=’YPrKXa’ user=’aslamwaqar’ default_tab=’html’

animations=’run’]

[/codepen_embed]

—————————————————-

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.