sendesignz

How to Create Gradient and Shadow Effect in HTML5 Canvas

The HTML5 specification includes lots of new features, one of the feature is canvas element, it is programmatically draw graphs, charts, animations and other sort of graphics. canvas gives you an easy and powerful way to draw graphics using JavaScript. In this post I will show you how to create gradient effect and shadow effect.

First we'll get familiar with JavaScript and the canvas element together by drawing some simple gradient box.

The Basics of Using Canvas

Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML document:

<canvas id="my_canvas" width="900" height="300">

Fallback content here

</canvas>


You need to define an element ID so you can find the element later in your JavaScript code, and you also need to define the width and height of the canvas.

JavaScript

var drawLogo = function(){

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');
 

var gradient = context.createLinearGradient(0, 0, 0, 100);

gradient.addColorStop(0,'white');

gradient.addColorStop(1, 'black');

 

context.fillStyle = gradient;

context.strokeStyle = gradient;

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

});


For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want.

context.createLinearGradient(startX, startY,endX, endY)

The createLinearGradient creates a linear gradient. The gradient is created by two pairs of coordinates from (startX, startY) to (endX, endY). Set your specified gradient to the fillStyle, etc.


gradient.addColorStop(offset, Color)

offset - an offset in the range [0.0 to 1.0]

Color - Color the color
 

context.fillRect(setX, sety, width, height)

You need to provide the (x,y) coordinates, followed by the width and height dimensions.

Full Code

<!DOCTYPE html>

 

<html>

<head>

<title>HTML5 Canvas</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

 

var drawLogo = function(){

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');

 

var gradient = context.createLinearGradient(0, 0, 0, 100);

 

gradient.addColorStop(0,'white');

gradient.addColorStop(1, 'black');

 

context.fillStyle = gradient;

context.strokeStyle = gradient;

 

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

});

</script>

</head>

<body>

<canvas id="my_canvas" width="900" height="300">

Fallback content here

</canvas>

</body>

</html>

Another Gradient

var drawLogo = function(){

 

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');

 

var gradient = context.createLinearGradient(0, 0, 50, 100);

gradient.addColorStop(0,'white');

gradient.addColorStop(1, 'black');

 

context.fillStyle = gradient;

context.strokeStyle = gradient;

 

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

});

Rainbow Colors

var drawLogo = function(){

 

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');

 

var gradient = context.createLinearGradient(0, 0, 0, 100);

 

gradient.addColorStop(0,'red');

gradient.addColorStop(0.5, 'yellow');

gradient.addColorStop(1, 'blue');

 

context.fillStyle = gradient;

context.strokeStyle = gradient;

 

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

});

Radiant Gradient

var drawLogo = function(){

 

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');

 

var gradient = context.createRadialGradient(60,60,20,60,60,70);

gradient.addColorStop(0,'white');

gradient.addColorStop(1, 'black');

context.fillStyle = gradient;

context.strokeStyle = gradient;

 

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

}); 


context.createRadialGradient(startX,startY,startRadius,endX,endY,endRadius)

The createRadialGradient creates a radial gradient. The gradient is created by two pairs of coordinates from (startX,startY) to (endX,endY). This is just a circular, so specify the radius for the start circle and the end one. Set your specified gradient to the fillStyle, etc.

Shadow Color

var drawLogo = function(){

 

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');

 

var gradient = context.createLinearGradient(0, 0, 50, 100);

gradient.addColorStop(0,'white');

gradient.addColorStop(1, 'black');

context.fillStyle = gradient;

context.strokeStyle = gradient;

 

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowBlur = 10;

context.shadowColor = '#0036ff';

 

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

});

Leave your comments

Post comment as a guest

0
terms and condition.

People in this conversation

  • It's a great experience me. I think it a great educational post. Thanks for sharing it.

    0 Like Short URL:
  • Programming is combination of intelligent and creative work. Programmers can do anything with code. The entire Programming tutorials that you mention here on this blog are awesome. also provides latest tutorials of Programming from beginning to advance level.
    Be with us to learn programming in new and creative way.

    from Taxila, Pakistan
    0 Like Short URL:
  • Guest (Stolyte)

    Hi! You have a very inspiring way of exploring and sharing your thoughts, I've saw many helpful

    parts of graphics, I know that anybody will be catch easily if they read carefully. Thanks a

    lot for shared excellent shot of illustration. I really loved to say I will visit again.

    Thanks
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    remove image background service

    0 Like Short URL:
  • Guest (Terrence81)

    Why would you use this as opposed to CSS3? Examples?
    <br />This is a simple example of drawing. You can do more complex drawing. In future i will write a tutorial for more complex drawing.

    0 Like Short URL:
  • Why would you use this as opposed to CSS3? Examples?

    1 Like Short URL: