In this html5 Canvas tutorial we will discuss what are different attributes of html5 Canvas.How we can set line attributes using html5 Canvas
html5 canvas line attributes tutorial
How to set line attributes using html5 canvas
HTML5 Canvas Line Attributes
- fillStyle
- strokeStyle
- lineWidth
- lineJoin
- lineCap
fillStyle
Line can be of two types, solid line and outline.
color of solid line is set with fillStyle attribute of line.
The code for setting fillStyle of line Will be.
Context.fillStyle=fillvalue
.
fillStyle takes three types of fillvalue. Solid color,gradient and Pattern.strokeStyle
If we draw a outline of line instead of solid line,then to set color of line we use strokeStyle attribute of line.To set strokeStyle of line the code will be
Context.strokeStyle =strokecolorvalue
strokeStyle can take three types of values simplecolor or gradient or pattern.lineWidth
To set width of line html5 canvas use lineWidth attribute.
The code for setting width of line will be.
Context.lineWidth = value
This value is a number which represent how many pixels takes the width of line.
lineJoine
When two line meets , they create a corner, there are three types of corner, bevel,round and miter
To set a lineJoinhtml5 canvas use the following code.
context.lineJoin = value
lineJoin can take three types of values.
bevelmiterround
The starting and ending point of line are called lineCap.
HTML5 Canvas uses three types of values to set lineCapof line.
The code for set lineCap attributes of line is given.
context.lineCap =value
The value for lineCap attribute can be of three types.
buttroundsquare
———————————————————————–
HTML5 Canvas Line Attributes complete code example
—————————————————————————-
<!DOCTYPE html>
<html>
<head>
<title>html5 canvas line attributes </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context =canvas.getContext('2d');
//set line width
context.lineWidth= 30;
// set stroke style blue
context.strokeStyle ="#0000ff";
//set lineCap round
context.lineCap ="round";
// set line join bevel
context.lineJoin = 'round';
// start of drawing
context.beginPath();
// start point of first line
context.moveTo(100,70);
// end point of first line and start point of line second
context.lineTo(200,70);
//end point of second line
context.lineTo(200,240);
//draw line and make visible
context.stroke();
// close of drawing.
context.closePath();
</script>
</body>
</html>
——————————————————————
HTML5 Canvas line attributes
