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 callinglinearGradient() 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 ofgradient
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
=========================================================
—————————————————-
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
=========================================================
—————————————————-
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]
—————————————————-
