To fill an HTML5 Canvas shape with a solid color,
we can set the fillStyle property to
a color string such as blue, a hex value such as #0000FF, or
an RGB value such as rgb(0,0,255),
and then we can use the fill() method to fill the shape.
The default fill style for an HTML5 Canvas shape is black.
We must use fill() before stroke().
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!--from w ww .j a v a 2 s . c om-->
// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
To create a linear gradient with HTML5 Canvas,
we can use the createLinearGradient() method.
Linear gradients are defined by the direction of the gradient.
We can insert colors using the addColorStop property.
The direction of the linear gradient moves from the starting point to the ending point defined with createLinearGradient().
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
<!--from w w w .ja va 2s . co m-->
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, 'blue');
// dark blue
grd.addColorStop(1, 'red');
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
The code above is rendered as follows:
To create a radial gradient with HTML5 Canvas,
we can use the createRadialGradient() method.
Radial gradients are defined with two circles: starting circle and ending circle. The gradient starts with the start circle and moves towards the end circle.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
<!--from ww w. j a v a 2 s .c om-->
// create radial gradient
var grd = context.createRadialGradient(200, 50, 10, 200, 50, 300);
// light blue
grd.addColorStop(0, 'red');
// dark blue
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
The code above is rendered as follows:
To create a pattern with the HTML5 Canvas,
we can use the createPattern() method.
The createPattern() method
returns a pattern object, then we can set the
fillStyle property to the pattern object, and then fill the shape using fill().
The createPattern() method requires an image object and
a repeat option, which can be repeat, repeat-x, repeat-y, or no-repeat.
The repeat option is defaulted to repeat.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- w ww. j a va2 s.c om-->
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
imageObj.src = 'http://www.java2s.com/style/demo/border.png';
</script>
</body>
</html>
The code above is rendered as follows: