Essential Books

strokeStyle (a path styling attribute)

suggest change 
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):

You can also specify these color options (these options are objects created by the context): 

<!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>
Found a mistake? Have a question or improvement idea? Let me know.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

Path syntax:
* Path Syntax only
* Overview of the basic path drawing commands lines and curves
* lineTo (a path command)
* arc (a path command)
* quadraticCurveTo (a path command)
* bezierCurveTo (a path command)
* arcTo (a path command)
* rect (a path command)
* closePath (a path command)
* beginPath (a path command)
* lineCap (a path styling attribute)
* lineJoin (a path styling attribute)
* strokeStyle (a path styling attribute)
* fillStyle (a path styling attribute)
* lineWidth (a path styling attribute)
* shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (path styling attributes)
* createLinearGradient (creates a path styling object)
* createRadialGradient (creates a path styling object)
* createPattern (creates a path styling object)
* stroke (a path command)
* fill (a path command)
* clip (a path command)
Table Of Contents