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();
}
}); 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();
}
});
Comments
This is a simple example of drawing. You can do more complex drawing. In future i will write a tutorial for more complex drawing.
RSS feed for comments to this post