Skip to content

Commit 60d4b90

Browse files
author
Stefan Fenn
committed
simplified config
1 parent d2eeecc commit 60d4b90

4 files changed

Lines changed: 22 additions & 28 deletions

File tree

‎exampleFunction2d.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@
2727
xMax: 5,
2828
yMin: -1,
2929
yMax: 2,
30-
ctx: ctx,
31-
width: canvas.width,
32-
height: canvas.height
30+
ctx: ctx
3331
};
3432

3533
const canvasF2 = document.getElementById("fn2");

‎exampleFunction3d.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@
2727
xMax: 5,
2828
yMin: -1,
2929
yMax: 2,
30-
ctx: ctx,
31-
width: canvas.width,
32-
height: canvas.height
30+
ctx: ctx
3331
};
3432

3533
const canvasF3 = document.getElementById("fn3");

‎exampleGrid1.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@
1212
xMax: 5,
1313
yMin: -1,
1414
yMax: 2,
15-
ctx: ctx,
16-
width: canvas.width,
17-
height: canvas.height
15+
ctx: ctx
1816
};
1917

2018
drawGrid(config, 5 / 10, 4 / 10);

‎graphplot.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@ export function getGridPointDist(min, max, factor) {
2323
}
2424

2525
export function clear(c) {
26-
c.ctx.clearRect(0, 0, c.width, c.height);
26+
c.ctx.clearRect(0, 0, c.ctx.canvas.width, c.ctx.canvas.height);
2727
}
2828

2929
export function drawGrid(c, xFactor, yFactor, axisColor, gridColor) {
3030
clear(c);
3131
const xDiff = c.xMax - c.xMin;
32-
const xPixPerUnit = c.width / xDiff;
32+
const xPixPerUnit = c.ctx.canvas.width / xDiff;
3333
const yDiff = c.yMax - c.yMin;
34-
const yPixPerUnit = c.height / yDiff;
34+
const yPixPerUnit = c.ctx.canvas.height / yDiff;
3535
const xF = getGridPointDist(c.xMin, c.xMax, xFactor);
3636
const yF = getGridPointDist(c.yMin, c.yMax, yFactor);
3737
axisColor = axisColor || "#000000";
@@ -42,17 +42,17 @@ export function drawGrid(c, xFactor, yFactor, axisColor, gridColor) {
4242
let number = Math.round(Math.floor(xDiff / xF)) + 1;
4343
let axisPosition;
4444
if (c.yMin < 0 && c.yMax > 0) {
45-
axisPosition = c.height + c.yMin * yPixPerUnit + 12;
45+
axisPosition = c.ctx.canvas.height + c.yMin * yPixPerUnit + 12;
4646
} else {
47-
axisPosition = c.height - 12;
47+
axisPosition = c.ctx.canvas.height - 12;
4848
}
4949
c.ctx.strokeStyle = gridColor;
5050
for (let i = 0; i < number; i++) {
5151
if (Math.abs(startValue) < xF * 0.5) {
5252
c.ctx.strokeStyle = axisColor;
5353
}
5454
const position = Math.round((startValue - c.xMin) * xPixPerUnit);
55-
drawLine(c.ctx, position, 0, position, c.height);
55+
drawLine(c.ctx, position, 0, position, c.ctx.canvas.height);
5656
c.ctx.fillStyle = axisColor;
5757
const text = Math.round(startValue * 100) / 100;
5858
c.ctx.fillText(text + '', position + 4, axisPosition);
@@ -75,8 +75,8 @@ export function drawGrid(c, xFactor, yFactor, axisColor, gridColor) {
7575
if (Math.abs(startValue) < yF * 0.5) {
7676
c.ctx.strokeStyle = axisColor;
7777
}
78-
const position = c.height - Math.round((startValue - c.yMin) * yPixPerUnit);
79-
drawLine(c.ctx, 0, position, c.width, position);
78+
const position = c.ctx.canvas.height - Math.round((startValue - c.yMin) * yPixPerUnit);
79+
drawLine(c.ctx, 0, position, c.ctx.canvas.width, position);
8080
c.ctx.fillStyle = axisColor;
8181
const text = Math.round(startValue * 100) / 100;
8282
c.ctx.fillText(text + '', axisPosition, position - 4);
@@ -88,26 +88,26 @@ export function drawGrid(c, xFactor, yFactor, axisColor, gridColor) {
8888

8989
export function xCoordToPix(c, xCoord) {
9090
const xDiff = c.xMax - c.xMin;
91-
const xPixPerUnit = c.width / xDiff;
91+
const xPixPerUnit = c.ctx.canvas.width / xDiff;
9292
return (xCoord - c.xMin) * xPixPerUnit;
9393
}
9494

9595
export function yCoordToPix(c, yCoord) {
9696
const yDiff = c.yMax - c.yMin;
97-
const yPixPerUnit = c.height / yDiff;
98-
return c.height - (yCoord - c.yMin) * yPixPerUnit;
97+
const yPixPerUnit = c.ctx.canvas.height / yDiff;
98+
return c.ctx.canvas.height - (yCoord - c.yMin) * yPixPerUnit;
9999
}
100100

101101
export function xPixToCoord(c, xPix) {
102102
const xDiff = c.xMax - c.xMin;
103-
const xPixPerUnit = c.width / xDiff;
103+
const xPixPerUnit = c.ctx.canvas.width / xDiff;
104104
return xPix / xPixPerUnit + c.xMin;
105105
}
106106

107107
export function yPixToCoord(c, yPix) {
108108
const yDiff = c.yMax - c.yMin;
109-
const yPixPerUnit = c.height / yDiff;
110-
return -(yPix - c.height) / yPixPerUnit + c.yMin;
109+
const yPixPerUnit = c.ctx.canvas.height / yDiff;
110+
return -(yPix - c.ctx.canvas.height) / yPixPerUnit + c.yMin;
111111
}
112112

113113
export function drawLine(ctx, x1, y1, x2, y2) {
@@ -122,7 +122,7 @@ export function drawFunction(c, strokeStyle, func) {
122122
c.ctx.strokeStyle = strokeStyle;
123123
c.ctx.lineWidth = 3;
124124
c.ctx.beginPath();
125-
for (let w = 0; w <= c.width; w++) {
125+
for (let w = 0; w <= c.ctx.canvas.width; w++) {
126126
const y = func(xPixToCoord(c, w));
127127
const h = yCoordToPix(c, y);
128128
if (w === 0) {
@@ -278,19 +278,19 @@ export function getGradientVector(colorMapIndex, levels) {
278278

279279
export function draw3dFunction(c, zMin, zMax, alpha, gv, func) {
280280
clear(c);
281-
const data = c.ctx.createImageData(c.width, c.height);
281+
const data = c.ctx.createImageData(c.ctx.canvas.width, c.ctx.canvas.height);
282282

283283
let w = 0;
284284
let h = -1;
285285

286286
const drawInTimeSlot = function () {
287287
const start = +new Date();
288288
while (+new Date() - start < 70) {
289-
if (w >= c.width) {
289+
if (w >= c.ctx.canvas.width) {
290290
break;
291291
}
292292
h++;
293-
if (h === c.height + 1) {
293+
if (h === c.ctx.canvas.height + 1) {
294294
w++;
295295
h = 0;
296296
}
@@ -310,7 +310,7 @@ export function draw3dFunction(c, zMin, zMax, alpha, gv, func) {
310310
if (z < zMin || z > zMax) {
311311
a *= 0.5;
312312
}
313-
const index = h * c.width * 4 + w * 4;
313+
const index = h * c.ctx.canvas.width * 4 + w * 4;
314314
data.data[index] = r;
315315
data.data[index + 1] = g;
316316
data.data[index + 2] = b;

0 commit comments

Comments
 (0)