| 59 | } |
| 60 | |
| 61 | drawGrid( x, y, lineWidth = 0.7 ){ |
| 62 | |
| 63 | this.context.font = "12px Arial"; |
| 64 | this.context.textAlign = "center"; |
| 65 | this.context.textBaseline = "middle"; |
| 66 | |
| 67 | const inc = (this.canvas.width * 0.95 - x)/ this.config.xMax; |
| 68 | |
| 69 | let num = 0; |
| 70 | |
| 71 | for( let xPos = x; xPos > 0; xPos -= inc){ |
| 72 | this.drawLightGrid( true, xPos-inc, inc ); |
| 73 | |
| 74 | this.context.strokeStyle = "#99C"; |
| 75 | this.context.lineWidth = lineWidth; |
| 76 | |
| 77 | // y grid |
| 78 | this.context.beginPath(); |
| 79 | this.context.moveTo( xPos, 0 ); |
| 80 | this.context.lineTo( xPos, this.canvas.height ); |
| 81 | |
| 82 | // Draw the Path |
| 83 | this.context.stroke(); |
| 84 | |
| 85 | if (num){ |
| 86 | this.context.fillText( num, xPos, y + 10 ); |
| 87 | } |
| 88 | |
| 89 | num--; |
| 90 | } |
| 91 | |
| 92 | num = 0; |
| 93 | |
| 94 | for( let xPos = x; xPos < this.canvas.width; xPos += inc){ |
| 95 | this.drawLightGrid( true, xPos, inc ); |
| 96 | |
| 97 | this.context.strokeStyle = "#555"; |
| 98 | this.context.lineWidth = lineWidth; |
| 99 | |
| 100 | // y grid |
| 101 | this.context.beginPath(); |
| 102 | this.context.moveTo( xPos, 0 ); |
| 103 | this.context.lineTo( xPos, this.canvas.height ); |
| 104 | |
| 105 | // Draw the Path |
| 106 | this.context.stroke(); |
| 107 | |
| 108 | if (num){ |
| 109 | this.context.fillText( num, xPos, y + 10 ); |
| 110 | } |
| 111 | |
| 112 | num++; |
| 113 | } |
| 114 | |
| 115 | num = 0; |
| 116 | |
| 117 | for( let yPos = y; yPos > 0; yPos -= inc){ |
| 118 | this.drawLightGrid( false, yPos-inc, inc ); |