0

I want to make mid-line as red. But doing so makes all the lines red that are drawn after mid-line.

Following is my JavaScript code for making a graph in html5 Canvas:

var c = document.getElementById("myCanvas");// Accessing Canvas element 
var graph = c.getContext("2d");
var posX = 100;
var posY = 50;
var finalX = posX;
var finalY = posY;
c.width = window.innerWidth; // To make canvas fullsize
c.height = window.innerHeight; // To make canvas fullsize 

graph.strokeRect(100,50,1000,500)

while(finalY < 550)
{
    finalY +=10;
    graph.beginPath();
    graph.moveTo(posX , finalY);
    graph.lineTo(posX + 1000, finalY);
    graph.stroke();
}
while(finalX <1100)
{
    finalX += 10;
    graph.beginPath();
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);
    if(finalX == 600) // 600 is position for midline
    {
        graph.linewidth = 5;
        graph.strokeStyle = "#ff0000";

    }

    graph.stroke();
}

2 Answers 2

0

Setting the strokeStyle will persist.

If you set strokeStyle='#ff0000' then all strokes after that will be red until you reset the strokeStyle to some other color.

In your case, you might draw the entire grid in black and then draw your midline in red.

BTW, you have a typo on the midline: linewidth must be lineWidth.

Here's example code and a Demo:

enter image description here

var c=document.getElementById("canvas");
var graph=canvas.getContext("2d");
var cw=c.width;
var ch=c.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var posX = 100;
var posY = 50;
var finalX = posX;
var finalY = posY;
c.width = window.innerWidth; // To make canvas fullsize
c.height = window.innerHeight; // To make canvas fullsize 

graph.strokeRect(100,50,1000,500)

while(finalY < 550)
{
  finalY +=10;
  graph.beginPath();
  graph.moveTo(posX , finalY);
  graph.lineTo(posX + 1000, finalY);
  graph.stroke();
}
while(finalX <1100)
{
  finalX += 10;
  graph.beginPath();
  graph.moveTo(finalX, posY);
  graph.lineTo(finalX, posY + 500);
  graph.stroke();
}

// draw midline
graph.beginPath();
graph.moveTo(posX+600, posY);
graph.lineTo(posX+600,finalY);
graph.lineWidth = 5;
graph.strokeStyle = "#ff0000";
graph.stroke();
graph.lineWidth=1;
graph.strokeStyle='black';
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>

0

As a simple approach, you could solve this by using a toggle for the positions, for example:

...
while(finalX <1100)
{
    finalX += 10;
    graph.beginPath();
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);

    if(finalX === 600) // 600 is position for midline
    {
        graph.linewidth = 5;
        graph.strokeStyle = "#ff0000";
    }
    else {    // in all other cases, black and width=1
        graph.linewidth = 1;
        graph.strokeStyle = "#000";
    }

    graph.stroke();
}

However, to increase performance you can also draw the single line in post. This will allow you to optimize the process and take advantage of using path by adding all lines to the same path and stroke a single time. Then only deal with the red line last:

// add all lines
graph.beginPath();
while(finalY < 550) {
    finalY +=10;
    graph.moveTo(posX , finalY);
    graph.lineTo(posX + 1000, finalY);
}
while(finalX <1100) {
    finalX += 10;
    graph.moveTo(finalX, posY);
    graph.lineTo(finalX, posY + 500);
}
graph.stroke();   // stroke all black lines at once

// draw red line on top on a new path
graph.beginPath()
graph.moveTo(600, posY);
graph.lineTo(600, posY + 500);
graph.linewidth = 5;
graph.strokeStyle = "#ff0000";
graph.stroke();

Setting styles always applies to next fill/stroke operation and everything that is on the current path. To draw with separate colors a new path is required.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.