remove if statement
[dygraphs.git] / dygraph-canvas.js
CommitLineData
88e95c46
DV
1/**
2 * @license
3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
5 */
6a1aa64f
DV
6
7/**
74a5af31
DV
8 * @fileoverview Based on PlotKit.CanvasRenderer, but modified to meet the
9 * needs of dygraphs.
10 *
3df0ccf0 11 * In particular, support for:
0abfbd7e 12 * - grid overlays
3df0ccf0
DV
13 * - error bars
14 * - dygraphs attribute system
6a1aa64f
DV
15 */
16
6a1aa64f 17/**
423f5ed3
DV
18 * The DygraphCanvasRenderer class does the actual rendering of the chart onto
19 * a canvas. It's based on PlotKit.CanvasRenderer.
6a1aa64f 20 * @param {Object} element The canvas to attach to
2cf95fff
RK
21 * @param {Object} elementContext The 2d context of the canvas (injected so it
22 * can be mocked for testing.)
285a6bda 23 * @param {Layout} layout The DygraphLayout object for this graph.
74a5af31 24 * @constructor
6a1aa64f 25 */
c0f54d4f 26
758a629f
DV
27/*jshint globalstrict: true */
28/*global Dygraph:false,RGBColor:false */
c0f54d4f
DV
29"use strict";
30
79253bd0 31
8cfe592f
DV
32/**
33 * @constructor
34 *
35 * This gets called when there are "new points" to chart. This is generally the
36 * case when the underlying data being charted has changed. It is _not_ called
37 * in the common case that the user has zoomed or is panning the view.
38 *
39 * The chart canvas has already been created by the Dygraph object. The
40 * renderer simply gets a drawing context.
41 *
42 * @param {Dyraph} dygraph The chart to which this renderer belongs.
43 * @param {Canvas} element The <canvas> DOM element on which to draw.
44 * @param {CanvasRenderingContext2D} elementContext The drawing context.
45 * @param {DygraphLayout} layout The chart's DygraphLayout object.
46 *
47 * TODO(danvk): remove the elementContext property.
48 */
c0f54d4f 49var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
9317362d 50 this.dygraph_ = dygraph;
fbe31dc8 51
fbe31dc8 52 this.layout = layout;
b0c3b730 53 this.element = element;
2cf95fff 54 this.elementContext = elementContext;
fbe31dc8
DV
55 this.container = this.element.parentNode;
56
fbe31dc8
DV
57 this.height = this.element.height;
58 this.width = this.element.width;
59
60 // --- check whether everything is ok before we return
61 if (!this.isIE && !(DygraphCanvasRenderer.isSupported(this.element)))
62 throw "Canvas is not supported.";
63
64 // internal state
70be5ed1 65 this.area = layout.getPlotArea();
423f5ed3
DV
66 this.container.style.position = "relative";
67 this.container.style.width = this.width + "px";
68
69 // Set up a clipping area for the canvas (and the interaction canvas).
70 // This ensures that we don't overdraw.
920208fb
PF
71 if (this.dygraph_.isUsingExcanvas_) {
72 this._createIEClipArea();
73 } else {
971870e5
DV
74 // on Android 3 and 4, setting a clipping area on a canvas prevents it from
75 // displaying anything.
76 if (!Dygraph.isAndroid()) {
77 var ctx = this.dygraph_.canvas_ctx_;
78 ctx.beginPath();
79 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
80 ctx.clip();
920208fb 81
971870e5
DV
82 ctx = this.dygraph_.hidden_ctx_;
83 ctx.beginPath();
84 ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
85 ctx.clip();
86 }
920208fb 87 }
423f5ed3
DV
88};
89
90DygraphCanvasRenderer.prototype.attr_ = function(x) {
91 return this.dygraph_.attr_(x);
92};
93
8cfe592f
DV
94/**
95 * Clears out all chart content and DOM elements.
96 * This is called immediately before render() on every frame, including
97 * during zooms and pans.
98 * @private
99 */
fbe31dc8 100DygraphCanvasRenderer.prototype.clear = function() {
758a629f 101 var context;
fbe31dc8
DV
102 if (this.isIE) {
103 // VML takes a while to start up, so we just poll every this.IEDelay
104 try {
105 if (this.clearDelay) {
106 this.clearDelay.cancel();
107 this.clearDelay = null;
108 }
758a629f 109 context = this.elementContext;
fbe31dc8
DV
110 }
111 catch (e) {
76171648 112 // TODO(danvk): this is broken, since MochiKit.Async is gone.
758a629f
DV
113 // this.clearDelay = MochiKit.Async.wait(this.IEDelay);
114 // this.clearDelay.addCallback(bind(this.clear, this));
fbe31dc8
DV
115 return;
116 }
117 }
118
758a629f 119 context = this.elementContext;
fbe31dc8 120 context.clearRect(0, 0, this.width, this.height);
fbe31dc8
DV
121};
122
8cfe592f
DV
123/**
124 * Checks whether the browser supports the <canvas> tag.
125 * @private
126 */
fbe31dc8
DV
127DygraphCanvasRenderer.isSupported = function(canvasName) {
128 var canvas = null;
129 try {
758a629f 130 if (typeof(canvasName) == 'undefined' || canvasName === null) {
b0c3b730 131 canvas = document.createElement("canvas");
758a629f 132 } else {
b0c3b730 133 canvas = canvasName;
758a629f
DV
134 }
135 canvas.getContext("2d");
fbe31dc8
DV
136 }
137 catch (e) {
138 var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
139 var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
140 if ((!ie) || (ie[1] < 6) || (opera))
141 return false;
142 return true;
143 }
144 return true;
6a1aa64f 145};
6a1aa64f
DV
146
147/**
8cfe592f
DV
148 * This method is responsible for drawing everything on the chart, including
149 * lines, error bars, fills and axes.
150 * It is called immediately after clear() on every frame, including during pans
151 * and zooms.
152 * @private
6a1aa64f 153 */
285a6bda 154DygraphCanvasRenderer.prototype.render = function() {
2ce09b19 155 this._renderLineChart();
fbe31dc8
DV
156};
157
920208fb
PF
158DygraphCanvasRenderer.prototype._createIEClipArea = function() {
159 var className = 'dygraph-clip-div';
160 var graphDiv = this.dygraph_.graphDiv;
161
162 // Remove old clip divs.
163 for (var i = graphDiv.childNodes.length-1; i >= 0; i--) {
164 if (graphDiv.childNodes[i].className == className) {
165 graphDiv.removeChild(graphDiv.childNodes[i]);
166 }
167 }
168
169 // Determine background color to give clip divs.
170 var backgroundColor = document.bgColor;
171 var element = this.dygraph_.graphDiv;
172 while (element != document) {
173 var bgcolor = element.currentStyle.backgroundColor;
174 if (bgcolor && bgcolor != 'transparent') {
175 backgroundColor = bgcolor;
176 break;
177 }
178 element = element.parentNode;
179 }
180
181 function createClipDiv(area) {
758a629f 182 if (area.w === 0 || area.h === 0) {
920208fb
PF
183 return;
184 }
185 var elem = document.createElement('div');
186 elem.className = className;
187 elem.style.backgroundColor = backgroundColor;
188 elem.style.position = 'absolute';
189 elem.style.left = area.x + 'px';
190 elem.style.top = area.y + 'px';
191 elem.style.width = area.w + 'px';
192 elem.style.height = area.h + 'px';
193 graphDiv.appendChild(elem);
194 }
195
196 var plotArea = this.area;
197 // Left side
758a629f
DV
198 createClipDiv({
199 x:0, y:0,
200 w:plotArea.x,
201 h:this.height
202 });
203
920208fb 204 // Top
758a629f
DV
205 createClipDiv({
206 x: plotArea.x, y: 0,
207 w: this.width - plotArea.x,
208 h: plotArea.y
209 });
210
920208fb 211 // Right side
758a629f
DV
212 createClipDiv({
213 x: plotArea.x + plotArea.w, y: 0,
214 w: this.width-plotArea.x - plotArea.w,
215 h: this.height
216 });
217
920208fb 218 // Bottom
758a629f
DV
219 createClipDiv({
220 x: plotArea.x,
221 y: plotArea.y + plotArea.h,
222 w: this.width - plotArea.x,
223 h: this.height - plotArea.h - plotArea.y
224 });
225};
fbe31dc8 226
fbe31dc8 227
ccb0001c 228/**
8722284b
RK
229 * Returns a predicate to be used with an iterator, which will
230 * iterate over points appropriately, depending on whether
231 * connectSeparatedPoints is true. When it's false, the predicate will
232 * skip over points with missing yVals.
ccb0001c 233 */
8722284b 234DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) {
9f6db80e
DV
235 return connectSeparatedPoints
236 ? DygraphCanvasRenderer._predicateThatSkipsEmptyPoints
237 : null;
8722284b
RK
238}
239
240DygraphCanvasRenderer._predicateThatSkipsEmptyPoints =
241 function(array, idx) { return array[idx].yval !== null; }
04c104d7 242
9f6db80e
DV
243/**
244 *
245 * @private
246 */
857a6931 247DygraphCanvasRenderer.prototype._drawStyledLine = function(
5469113b
KW
248 ctx, i, setName, color, strokeWidth, strokePattern, drawPoints,
249 drawPointCallback, pointSize) {
99a77a04 250 // TODO(konigsberg): Compute attributes outside this method call.
857a6931
KW
251 var stepPlot = this.attr_("stepPlot");
252 var firstIndexInSet = this.layout.setPointsOffsets[i];
253 var setLength = this.layout.setPointsLengths[i];
857a6931 254 var points = this.layout.points;
857a6931
KW
255 if (!Dygraph.isArrayLike(strokePattern)) {
256 strokePattern = null;
257 }
a5a50727 258 var drawGapPoints = this.dygraph_.attr_('drawGapEdgePoints', setName);
857a6931 259
7d1afbb9 260 var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
9f6db80e
DV
261 DygraphCanvasRenderer._getIteratorPredicate(
262 this.attr_("connectSeparatedPoints")));
7d1afbb9 263
fb63bf1b
DV
264 var stroking = strokePattern && (strokePattern.length >= 2);
265
0140347d 266 ctx.save();
fb63bf1b
DV
267 if (stroking) {
268 ctx.installPattern(strokePattern);
b843b52c 269 }
fb63bf1b 270
0140347d 271 var pointsOnLine = this._drawSeries(ctx, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color);
31f8e58b
RK
272 this._drawPointsOnLine(ctx, pointsOnLine, drawPointCallback, setName, color, pointSize);
273
fb63bf1b
DV
274 if (stroking) {
275 ctx.uninstallPattern();
276 }
b843b52c 277
fb63bf1b 278 ctx.restore();
31f8e58b
RK
279};
280
a401ca8a
RK
281DygraphCanvasRenderer.prototype._drawPointsOnLine = function(ctx, pointsOnLine, drawPointCallback, setName, color, pointSize) {
282 for (var idx = 0; idx < pointsOnLine.length; idx++) {
283 var cb = pointsOnLine[idx];
284 ctx.save();
285 drawPointCallback(
286 this.dygraph_, setName, ctx, cb[0], cb[1], color, pointSize);
287 ctx.restore();
288 }
289}
290
31f8e58b
RK
291DygraphCanvasRenderer.prototype._drawSeries = function(
292 ctx, iter, strokeWidth, pointSize, drawPoints, drawGapPoints,
0140347d 293 stepPlot, color) {
31f8e58b 294
31f8e58b
RK
295 var prevCanvasX = null;
296 var prevCanvasY = null;
297 var nextCanvasY = null;
298 var isIsolated; // true if this point is isolated (no line segments)
299 var point; // the point being processed in the while loop
b843b52c 300 var pointsOnLine = []; // Array of [canvasx, canvasy] pairs.
31f8e58b
RK
301 var first = true; // the first cycle through the while loop
302
0140347d
DV
303 ctx.beginPath();
304 ctx.strokeStyle = color;
305 ctx.lineWidth = strokeWidth;
31f8e58b 306
0140347d 307 while (iter.hasNext) {
7d1afbb9 308 point = iter.next();
a02978e2 309 if (point.canvasy === null || point.canvasy != point.canvasy) {
31f8e58b 310 if (stepPlot && prevCanvasX !== null) {
857a6931 311 // Draw a horizontal line to the start of the missing data
0140347d
DV
312 ctx.moveTo(prevX, prevY);
313 ctx.lineTo(point.canvasx, prevY);
857a6931 314 }
31f8e58b 315 prevCanvasX = prevCanvasY = null;
857a6931 316 } else {
ff1074cd 317 nextCanvasY = iter.hasNext ? iter.peek.canvasy : null;
9f6db80e
DV
318 // TODO: we calculate isNullOrNaN for this point, and the next, and then,
319 // when we iterate, test for isNullOrNaN again. Why bother?
a02978e2
RK
320 var isNextCanvasYNullOrNaN = nextCanvasY === null || nextCanvasY != nextCanvasY;
321 isIsolated = (!prevCanvasX && isNextCanvasYNullOrNaN);
19b84fe7 322 if (drawGapPoints) {
31f8e58b 323 // Also consider a point to be "isolated" if it's adjacent to a
19b84fe7 324 // null point, excluding the graph edges.
31f8e58b 325 if ((!first && !prevCanvasX) ||
ff1074cd 326 (iter.hasNext && isNextCanvasYNullOrNaN)) {
19b84fe7
KW
327 isIsolated = true;
328 }
329 }
31f8e58b 330 if (prevCanvasX !== null) {
857a6931 331 if (strokeWidth) {
857a6931 332 if (stepPlot) {
0140347d
DV
333 ctx.moveTo(prevCanvasX, prevCanvasY);
334 ctx.lineTo(point.canvasx, prevCanvasY);
31f8e58b 335 prevCanvasX = point.canvasx;
857a6931 336 }
0140347d
DV
337 ctx.moveTo(prevCanvasX, prevCanvasY);
338 ctx.lineTo(point.canvasx, point.canvasy);
b843b52c
RK
339 }
340 }
b843b52c
RK
341 if (drawPoints || isIsolated) {
342 pointsOnLine.push([point.canvasx, point.canvasy]);
343 }
31f8e58b
RK
344 prevCanvasX = point.canvasx;
345 prevCanvasY = point.canvasy;
b843b52c 346 }
7d1afbb9 347 first = false;
b843b52c 348 }
0140347d 349 ctx.stroke();
31f8e58b 350 return pointsOnLine;
857a6931
KW
351};
352
353DygraphCanvasRenderer.prototype._drawLine = function(ctx, i) {
354 var setNames = this.layout.setNames;
355 var setName = setNames[i];
356
357 var strokeWidth = this.dygraph_.attr_("strokeWidth", setName);
358 var borderWidth = this.dygraph_.attr_("strokeBorderWidth", setName);
5469113b
KW
359 var drawPointCallback = this.dygraph_.attr_("drawPointCallback", setName) ||
360 Dygraph.Circles.DEFAULT;
99a77a04 361
857a6931 362 if (borderWidth && strokeWidth) {
5469113b 363 this._drawStyledLine(ctx, i, setName,
857a6931
KW
364 this.dygraph_.attr_("strokeBorderColor", setName),
365 strokeWidth + 2 * borderWidth,
366 this.dygraph_.attr_("strokePattern", setName),
367 this.dygraph_.attr_("drawPoints", setName),
5469113b 368 drawPointCallback,
857a6931
KW
369 this.dygraph_.attr_("pointSize", setName));
370 }
371
5469113b 372 this._drawStyledLine(ctx, i, setName,
857a6931
KW
373 this.colors[setName],
374 strokeWidth,
375 this.dygraph_.attr_("strokePattern", setName),
376 this.dygraph_.attr_("drawPoints", setName),
5469113b 377 drawPointCallback,
857a6931
KW
378 this.dygraph_.attr_("pointSize", setName));
379};
ce49c2fa 380
6a1aa64f 381/**
758a629f 382 * Actually draw the lines chart, including error bars.
758a629f 383 * @private
6a1aa64f 384 */
285a6bda 385DygraphCanvasRenderer.prototype._renderLineChart = function() {
857a6931 386 var ctx = this.elementContext;
e4182459 387 var errorBars = this.attr_("errorBars") || this.attr_("customBars");
44c6bc29 388 var fillGraph = this.attr_("fillGraph");
01a14b85 389 var i;
21d3323f 390
82c6fe4d 391 var setNames = this.layout.setNames;
21d3323f 392 var setCount = setNames.length;
6a1aa64f 393
ee53deb9 394 this.colors = this.dygraph_.colorsMap_;
f032c51d 395
ff00d3e2
DV
396 // Update Points
397 // TODO(danvk): here
b843b52c
RK
398 //
399 // TODO(bhs): this loop is a hot-spot for high-point-count charts. These
400 // transformations can be pushed into the canvas via linear transformation
401 // matrices.
01a14b85
DV
402 var points = this.layout.points;
403 for (i = points.length; i--;) {
404 var point = points[i];
6a1aa64f
DV
405 point.canvasx = this.area.w * point.x + this.area.x;
406 point.canvasy = this.area.h * point.y + this.area.y;
407 }
6a1aa64f 408
01a14b85
DV
409 // Draw any "fills", i.e. error bars or the filled area under a series.
410 // These must all be drawn before any lines, so that the main lines of a
411 // series are drawn on top.
80aaae18 412 if (errorBars) {
6a834bbb
DV
413 if (fillGraph) {
414 this.dygraph_.warn("Can't use fillGraph option with error bars");
415 }
416
01a14b85 417 ctx.save();
6a6439da 418 this.drawErrorBars_(points);
857a6931 419 ctx.restore();
5954ef32 420 } else if (fillGraph) {
857a6931 421 ctx.save();
01a14b85 422 this.drawFillBars_(points);
857a6931 423 ctx.restore();
80aaae18
DV
424 }
425
f9414b11 426 // Drawing the lines.
758a629f 427 for (i = 0; i < setCount; i += 1) {
857a6931 428 this._drawLine(ctx, i);
80aaae18 429 }
6a1aa64f 430};
79253bd0 431
01a14b85
DV
432/**
433 * Draws the shaded error bars/confidence intervals for each series.
434 * This happens before the center lines are drawn, since the center lines
435 * need to be drawn on top of the error bars for all series.
436 *
437 * @private
438 */
6a6439da
DV
439DygraphCanvasRenderer.prototype.drawErrorBars_ = function(points) {
440 var ctx = this.elementContext;
441 var setNames = this.layout.setNames;
442 var setCount = setNames.length;
443 var fillAlpha = this.attr_('fillAlpha');
01a14b85 444 var stepPlot = this.attr_('stepPlot');
6a6439da
DV
445
446 var newYs;
447
448 for (var i = 0; i < setCount; i++) {
449 var setName = setNames[i];
450 var axis = this.dygraph_.axisPropertiesForSeries(setName);
451 var color = this.colors[setName];
452
453 var firstIndexInSet = this.layout.setPointsOffsets[i];
454 var setLength = this.layout.setPointsLengths[i];
455
456 var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
01a14b85
DV
457 DygraphCanvasRenderer._getIteratorPredicate(
458 this.attr_("connectSeparatedPoints")));
6a6439da
DV
459
460 // setup graphics context
461 var prevX = NaN;
462 var prevY = NaN;
463 var prevYs = [-1, -1];
464 var yscale = axis.yscale;
465 // should be same color as the lines but only 15% opaque.
466 var rgb = new RGBColor(color);
467 var err_color =
468 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
469 ctx.fillStyle = err_color;
470 ctx.beginPath();
471 while (iter.hasNext) {
472 var point = iter.next();
473 if (point.name == setName) { // TODO(klausw): this is always true
474 if (!Dygraph.isOK(point.y)) {
475 prevX = NaN;
476 continue;
477 }
478
479 // TODO(danvk): here
480 if (stepPlot) {
481 newYs = [ point.y_bottom, point.y_top ];
482 prevY = point.y;
483 } else {
484 newYs = [ point.y_bottom, point.y_top ];
485 }
486 newYs[0] = this.area.h * newYs[0] + this.area.y;
487 newYs[1] = this.area.h * newYs[1] + this.area.y;
488 if (!isNaN(prevX)) {
489 if (stepPlot) {
490 ctx.moveTo(prevX, newYs[0]);
491 } else {
492 ctx.moveTo(prevX, prevYs[0]);
493 }
494 ctx.lineTo(point.canvasx, newYs[0]);
495 ctx.lineTo(point.canvasx, newYs[1]);
496 if (stepPlot) {
497 ctx.lineTo(prevX, newYs[1]);
498 } else {
499 ctx.lineTo(prevX, prevYs[1]);
500 }
501 ctx.closePath();
502 }
503 prevYs = newYs;
504 prevX = point.canvasx;
505 }
506 }
507 ctx.fill();
508 }
509};
510
79253bd0 511/**
01a14b85
DV
512 * Draws the shaded regions when "fillGraph" is set. Not to be confused with
513 * error bars.
514 *
515 * @private
516 */
517DygraphCanvasRenderer.prototype.drawFillBars_ = function(points) {
518 var ctx = this.elementContext;
519 var setNames = this.layout.setNames;
520 var setCount = setNames.length;
521 var fillAlpha = this.attr_('fillAlpha');
522 var stepPlot = this.attr_('stepPlot');
523 var stackedGraph = this.attr_("stackedGraph");
524
525 var baseline = {}; // for stacked graphs: baseline for filling
526 var currBaseline;
527
528 // process sets in reverse order (needed for stacked graphs)
529 for (var i = setCount - 1; i >= 0; i--) {
530 var setName = setNames[i];
531 var color = this.colors[setName];
532 var axis = this.dygraph_.axisPropertiesForSeries(setName);
533 var axisY = 1.0 + axis.minyval * axis.yscale;
534 if (axisY < 0.0) axisY = 0.0;
535 else if (axisY > 1.0) axisY = 1.0;
536 axisY = this.area.h * axisY + this.area.y;
537 var firstIndexInSet = this.layout.setPointsOffsets[i];
538 var setLength = this.layout.setPointsLengths[i];
539
540 var iter = Dygraph.createIterator(points, firstIndexInSet, setLength,
541 DygraphCanvasRenderer._getIteratorPredicate(
542 this.attr_("connectSeparatedPoints")));
543
544 // setup graphics context
545 var prevX = NaN;
546 var prevYs = [-1, -1];
547 var newYs;
548 var yscale = axis.yscale;
549 // should be same color as the lines but only 15% opaque.
550 var rgb = new RGBColor(color);
551 var err_color =
552 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')';
553 ctx.fillStyle = err_color;
554 ctx.beginPath();
555 while(iter.hasNext) {
556 var point = iter.next();
16febe6b
DV
557 if (!Dygraph.isOK(point.y)) {
558 prevX = NaN;
559 continue;
560 }
561 if (stackedGraph) {
562 currBaseline = baseline[point.canvasx];
563 var lastY;
564 if (currBaseline === undefined) {
565 lastY = axisY;
566 } else {
567 if(stepPlot) {
568 lastY = currBaseline[0];
01a14b85 569 } else {
16febe6b 570 lastY = currBaseline;
01a14b85 571 }
16febe6b
DV
572 }
573 newYs = [ point.canvasy, lastY ];
01a14b85 574
16febe6b
DV
575 if(stepPlot) {
576 // Step plots must keep track of the top and bottom of
577 // the baseline at each point.
578 if(prevYs[0] === -1) {
579 baseline[point.canvasx] = [ point.canvasy, axisY ];
01a14b85 580 } else {
16febe6b 581 baseline[point.canvasx] = [ point.canvasy, prevYs[0] ];
01a14b85 582 }
01a14b85 583 } else {
16febe6b 584 baseline[point.canvasx] = point.canvasy;
01a14b85 585 }
01a14b85 586
16febe6b
DV
587 } else {
588 newYs = [ point.canvasy, axisY ];
589 }
590 if (!isNaN(prevX)) {
591 ctx.moveTo(prevX, prevYs[0]);
592
593 if (stepPlot) {
594 ctx.lineTo(point.canvasx, prevYs[0]);
595 if(currBaseline) {
596 // Draw to the bottom of the baseline
597 ctx.lineTo(point.canvasx, currBaseline[1]);
01a14b85 598 } else {
01a14b85
DV
599 ctx.lineTo(point.canvasx, newYs[1]);
600 }
16febe6b
DV
601 } else {
602 ctx.lineTo(point.canvasx, newYs[0]);
603 ctx.lineTo(point.canvasx, newYs[1]);
01a14b85 604 }
16febe6b
DV
605
606 ctx.lineTo(prevX, prevYs[1]);
607 ctx.closePath();
01a14b85 608 }
16febe6b
DV
609 prevYs = newYs;
610 prevX = point.canvasx;
01a14b85
DV
611 }
612 ctx.fill();
613 }
614};