Draw Rectangle with Linear Gradient : In this article I will show you how to use Linear Gradient to draw the graphics. To draw graphics with Linear Gradient in web page we will use Canvas API, we will draw the createLinearGradient() method. Following is the simple example to draw Stroke Text on canvas:
<!DOCTYPE html>
<html>
<body>
<canvas id="gradientCanvas" width="350" height="200" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("gradientCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
0 Comment(s)