First let's add some code to our Canvas2D object to allow us to change the global context drawing properties. Let's set some default values in the constructor. We will set the pen to black with a width of 4 and make it completely opaque by setting globalAlpha to 1. We will set the line joins and caps to round to make our lines look smoother:

context.lineWidth = 4;
context.strokeStyle = "black";
context.fillStyle = "black";
context.globalAlpha = 1.0;
context.lineJoin = "round";
context.lineCap = "round";

Next we'll add public property accessor methods to allow us to set and get the value of the color, opacity, and width properties. If a parameter is passed into a property method (that is, arguments.length is not 0) it will set the value of the property then return this so we can do function chaining. Otherwise it will return the value of the property:

this.penWidth = function(newWidth)
{
    if (arguments.length)
    {
        context.lineWidth = newWidth;
        return this;
    }
    return context.lineWidth;
};
this.penColor = function(newColor)
{
    if (arguments.length)
    {
        context.strokeStyle = newColor;
        context.fillStyle = newColor;
        return this;
    }
    return context.strokeStyle;
};
this.penOpacity = function(newOpacity)
{
    if (arguments.length)
    {
        context.globalAlpha = newOpacity;
        return this;
    }
    return context
};

Now all we need is a way for the user to change these settings from the application, so the next thing we will implement is a toolbar.