O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – adding context properties

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required