CODEWITHSUNDEEP
htmlcanvas
JsCoder
JsCoder

Reputation: 1733

Canvas Chart fill the space between lines

I'm developing a simple chart using html5 Canvas. The idea is to draw two lines - one for min values and another one for max values, which I managed to do AND fill the space between those two line with some colour. Wonder how do I do the last part?

Upvotes: 1

Views: 3999

Answers (1)

Pablo Martinez
Pablo Martinez

Reputation: 2182

to fill the space you have to:

//get the context of the canvas
var context = canvas.getContext("2d");
//begin to draw
context.beginPath();
//draw all the lines you need to do the path....
context.moveTo(x, y);
context.lineTo(x1,y1);
context.lineTo(x2,y2);
//end of draw
context.closePath();

//to fill the space in the shape
context.fillStyle = "#FF00FF";
context.fill(); 
//to draw a border
context.lineWidth = 5;     
context.strokeStyle = "#FF0000";
context.stroke();

UPDATE: to fill the space between 2 lines, is drawing a square:

I asume the lines are defined as:

line1: from (x1,y1) to (x2,y2)
line2: from (x3,y3) to (x4,y4)

then the square to draw to fill the space:

from (x1,y1) -> (x2,y2) -> (x3,y3) -> (x4,y4) and closepath();

then:

context.beginPath();
context.moveTo(x1,y1); //go to first point
context.lineTo(x2,y2); //draw to second point
context.lineTo(x3,y3); //draw to third point
context.lineTo(x4,y4); //draw to last point
context.closePath();  //draw to first point
context.fill(); //fill the area

Upvotes: 2

Related Questions