HTML5 Canvas Methods
Using the path methods
When using the context object to draw, you always need a starting point and an ending point.
The ending point for one stroke also can become the starting point for the next stroke. You do this by calling the beginPath method on the context object and then drawing all your lines before calling either the closePath method or the beginPath method (which starts a new line) again.
So essentially, you can string together all the calls to the various drawing methods to create a complex stroke which is called a path.
<script type="text/javascript">
var pathMethods = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.beginPath();
ctxt.arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
ctxt.lineTo(150, 125);
ctxt.quadraticCurveTo(300, 0, 450, 125);
ctxt.lineTo(353, 144);
ctxt.strokeStyle = "blue";
ctxt.lineCap = "round";
ctxt.lineWidth = 10;
ctxt.stroke();
}
</script>
Using the rect method
Thecontext object to which you have a reference has a method called rect. The rect method takes the parameters listed in Table below:
| Parameter | Description |
| x,y | The x-coordinate and y-coordinate define the starting position of the rectangle. This is the top-left corner of the rectangle. |
| width | This defines the width of the rectangle. |
| height | This defines the height of the rectangle. |
The following code draws a rectangle using the rect method:
<script type="text/javascript">
var rectMethods = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.beginPath();
ctxt.rect(300, 200, 150, 75);
ctxt.stroke();
}
</script>
To center the rectangle, you would need to do a bit of math to calculate the center based on the size of your canvas as well as the size of your desired rectangle.
The following code should center the rectangle:
<script type="text/javascript">
var rectMethodCentered = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.beginPath();
var x, y;
x = 150;
y = 75;
ctxt.rect(300-(x/2), 200-(y/2), x, y);
ctxt.stroke();
}
</script>
Using the fill method
Filling a shape with a color is as simple as setting the fillStyle property to a color and calling the fill method.
The following code before calling the stroke method fills the rectangle shape with a green color:
<script type="text/javascript">
var fillMethods = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.beginPath();
var x, y;
x = 150;
y = 75;
ctxt.rect(300 - (x / 2), 200 - (y / 2), x, y);
//fill the shape with a green color
ctxt.fillStyle = "Green";
ctxt.fill();
ctxt.stroke();
}
</script>
Using the createLinearGradient method
Creating a gradient involves using a new CanvasGradient object. You first call the createLinearGradient method available on the context object to get a CanvasGradient object.
On that CanvasGradient object, you define the color stops that you want to blend to create the gradient effect. Then you assign your CanvasGradient object to the fillStyle property of the context.
The following code creates and fills a rectangle with a linear gradient:
<script type="text/javascript">
var linearGradient = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.rect(150, 150, 200, 125);
var gradient = ctxt.createLinearGradient(150, 150, 200, 125);
gradient.addColorStop(0, "Black");
gradient.addColorStop(0.5, "Gray");
gradient.addColorStop(1, "White");
ctxt.fillStyle = gradient;
ctxt.fill();
ctxt.stroke();
}
</script>
This code creates the CanvasGradient object by passing in the start and end points of a gradient line.
The addColorStop method takes two parameters:
- a value from 0 to 1, where 0 is the starting point of the gradient line and 1 is the ending point.
- the color to start filling with at that stop.
This example has three stops, so the gradient transitions through three colors.
Using the createRadialGradient method
This method takes six parameters, which specify the center point and radius of two circles and the color transitions through the stops along the cone formed by the two circles.
The following code produces a radial gradient:
<script type="text/javascript">
var radialGradient = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(120, 120, 220, 145);
var gradient = ctxt.createRadialGradient(200, 200, 5, 250, 250, 100);
gradient.addColorStop(0, "Red");
gradient.addColorStop(.5, "Orange");
gradient.addColorStop(1, "Blue");
ctxt.fillStyle = gradient;
ctxt.fill();
ctxt.stroke();
}
</script>
Using the createPattern method
In this case an external image is applied as a pattern throughout the shape. You can use an image that you created as a background to your canvas by using the following code:
<script type="text/javascript">
var gradientMethods3 = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(150, 150, 200, 125);
var img = new Image();
img.src = "image.jpg";
img.onload = function () {
var pat = ctxt.createPattern(img, "repeat");
ctxt.fillStyle = pat;
ctxt.fill();
ctxt.stroke();
}
}
</script>
The preceding code calls the createPattern method and passes it a reference to an Image object and a repeat pattern. The repeat pattern can be no-repeat, repeat-x, or repeat-y, but it defaults to repeat if you don’t specify anything.
Ads Right
