How to Create Gradient and Shadow Effect in HTML5 Canvas

, , Leave a comment

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:
{code}<canvas id="my_canvas" width="900" height="300">

Fallback content here

</canvas>{/code}
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

{code}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();

}

}); {/code}
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

{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>{/code}

Another Gradient

{code}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();

}

});{/code}

Rainbow Colors

{code}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();

}

});{/code}

Radiant Gradient

{code}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();

}

}); {/code}
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

{code}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();

}

}); {/code}

Share this:
 

Leave a Reply