Breaking News: Grepper is joining You.com. Read the official announcement!

Graph Paper with Fabric.js

HarunR answered on April 28, 2023 Popularity 1/10 Helpfulness 1/10

answer Graph Paper with Fabric.js

Graph Paper with Fabric.js

Comment

HTML Code:
<canvas id="cnvGraph" width="3000" height="1500"></canvas>
JavaScript Code:
// Download Fabric.js
//http://fabricjs.com/
function createGraph() {
var canvas = new fabric.Canvas('cnvGraph');
let j = 0;
function makeLine(coords, color = "black") {
return new fabric.Line(coords, {
stroke: color,
strokeWidth: 1,
selectable: false,
evented: false
});
}
for (let i = 0; i < 3000; i++) {
if (i % 15 === 0) {
if (j % 10 === 0) {
console.log('10');
canvas.add(makeLine([i, 0, i, 1500], '#ef516e'));
canvas.add(makeLine([0, i, 3000, i], '#ef516e'));
} else if (j % 5 === 0) {
console.log('5');
canvas.add(makeLine([i, 0, i, 1500], '#34c988'));
canvas.add(makeLine([0, i, 3000, i], '#34c988'));
} else {
canvas.add(makeLine([i, 0, i, 1500], '#9eaaa6'));
canvas.add(makeLine([0, i, 3000, i], '#9eaaa6'));
}
j++;
}
}
}
createGraph();

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: graph javascript

Link to this answer
Share Copy Link

Contributed on Apr 28 2023

HarunR

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Graph Paper with Fabric.js

Contents

More Related Answers

Graph Paper with Fabric.js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.