Web Programming with html5, css, and JavaScript

FIGUre 12.23B 
JavaScript file for Solar Shadowing web page
function drawOneArray(y0) {
var scaleFac; // horizontal projection of sloping surface
var width; // image width
scaleFac = Math.cos(slope);
width = image.width;
// Scale vertically to represent top view of sloping panels
context.scale(1.0, scaleFac);
if (slope >= 0) {y0 
-= length * scaleFac;}
context.drawImage(image, 50, y0 / scaleFac);
context.scale(1.0, 1.0 / scaleFac);
// Apply white line to brighten sunlit higher end
context.strokeStyle = "white";
context.lineWidth = 3;
context.beginPath();
if (slope < 0) {y0 += length * scaleFac;}
context.moveTo(X0, y0);
context.lineTo(X0 + width, y0);
context.stroke();
} // end drawOneArray
616
Chapter 12
 
Canvas

---

positive, when 
slope
is positive, 
drawOneArray
must reduce 
y0
by the 
y
-extent of the image 
before using it to specify the image’s location.
After depositing the scaled image, 
drawOneArray
draws a white line along the upper edge 
of this scaled image to represent sunlight reflected off the upper edge of the array. This helps the 
user see the direction of slope. Because the white line needs to be on the upper edge, whereas 
y0
(a copy of 
Y0
) initially specifies the location of the lower edge, 
y0
must change. When the slope is 
positive and 
y0
is initially on the southern edge, the change made to 
y0
for the previous scaling 
operation makes 
y0
correct for this operation as well. But when the slope is negative and 
y0
is on 
the northern edge, 
y0
needs to increase by the 
y
-extent of the image.