html5-canvas Path (Syntax only) strokeStyle (a path styling attribute)
Example
context.strokeStyle=color
Sets the color that will be used to stroke the outline of the current path.
These are color options (these must be quoted):
-
A CSS named color, for example
context.strokeStyle='red' -
A hex color, for example
context.strokeStyle='#FF0000' -
An RGB color, for example
context.strokeStyle='rgb(red,green,blue)'where red, green & blue are integers 0-255 indicating the strength of each component color. -
An HSL color, for example
context.strokeStyle='hsl(hue,saturation,lightness)'where hue is an integer 0-360 on the color wheel and saturation & lightness are percentages (0-100%) indicating the strength of each component. -
An HSLA color, for example
context.strokeStyle='hsl(hue,saturation,lightness,alpha)'where hue is an integer 0-360 on the color wheel and saturation & lightness are percentages (0-100%) indicating the strength of each component and alpha is a decimal value 0.00-1.00 indicating the opacity.
You can also specify these color options (these options are objects created by the context):
-
A linear gradient which is a linear gradient object created with
context.createLinearGradient -
A radial gradient which is a radial gradient object created with
context.createRadialGradient -
A pattern which is a pattern object created with
context.createPattern
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=15;
// stroke using a CSS color: named, RGB, HSL, etc
ctx.strokeStyle='red';
drawLine(50,40,250,40);
// stroke using a linear gradient
var gradient = ctx.createLinearGradient(75,75,175,75);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'green');
ctx.strokeStyle=gradient;
drawLine(50,75,250,75);
// stroke using a radial gradient
var gradient = ctx.createRadialGradient(100,110,15,100,110,45);
gradient.addColorStop(0,'red');
gradient.addColorStop(1,'green');
ctx.strokeStyle=gradient;
ctx.lineWidth=20;
drawLine(50,110,250,110);
// stroke using a pattern
var patternImage=new Image();
patternImage.onload=function(){
var pattern = ctx.createPattern(patternImage,'repeat');
ctx.strokeStyle=pattern;
drawLine(50,150,250,150);
}
patternImage.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';
// for demo only, draw labels by each stroke
ctx.textBaseline='middle';
ctx.font='14px arial';
ctx.fillText('CSS color',265,40);
ctx.fillText('Linear Gradient color',265,75);
ctx.fillText('Radial Gradient color',265,110);
ctx.fillText('Pattern color',265,150);
// utility to draw a line
function drawLine(startX,startY,endX,endY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
}
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=425 height=200></canvas>
</body>
</html>
