Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing lines with canvas by using for loop

I am trying to draw lines with canvas and I am changing the coordinates with a for loop.

here is my canvas element:

<canvas id="c" width="300px" height="300px"></canvas>

and here is the js codes:

var c = document.getElementById('c');
ci = c.getContext('2d');
for(var a = 18; a < 300; a +=18){
            fnc(a, ci);
            }   
function fnc(x, ci){

        ci.strokeStyle = 'red'; 
        ci.moveTo(0, x); 
        ci.lineTo(300, x); ci.lineWidth = 0.2; ci.stroke(); 
    }

As you can see I am trying to draw these lines with 18px spaces between them. But the thickness of the lines and the color(or opacity, I am not sure) are changing from top to bottom.

Here is a fiddle : http://jsfiddle.net/J6zzD/1/

So what is wrong with that I can't find my mistake. Why are the color and the thicknesses are different?

UPDATE :

I just wrote these lines out of the function and now all the lines becomes faded but thicknesses are same. So strange :

 ci.strokeStyle = 'red'; 
 ci.lineWidth = 0.2; ci.stroke();

here is demo : http://jsfiddle.net/J6zzD/4/

like image 410
ctarimli Avatar asked May 26 '14 21:05

ctarimli


People also ask

How do you draw a canvas line?

To draw a line on a canvas, you use the following steps: First, create a new line by calling the beginPath() method. Second, move the drawing cursor to the point (x,y) without drawing a line by calling the moveTo(x, y) . Finally, draw a line from the previous point to the point (x,y) by calling the lineTo(x,y) method.

What is used to draw lines on the canvas?

Overview. The lineTo method is used to draw a line on the canvas. Below are the steps to draw a line on the canvas: Use the beginPath() method to start a new path.

Which JavaScript method is used to draw a circle on a canvas?

The arc() method creates an arc/curve (used to create circles, or parts of circles). Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math. PI. Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.


1 Answers

That's again the eternal issue of forgetting to call beginPath.
Each time you call moveTo then lineTo, you create a new *sub*path, which adds to the current Path.
Then each time you call stroke(), the current path, so all the current subpaths get re-drawn, when the last added path is drawn for the first time.
Since opacities will add-up, top lines will reach 100% opacity (alpha=255) when the bottom line, drawn once, will have a 20% opacity (lineWidth=0.2) .

In your second fiddle, you stroke only once, so all lines have 20% opacity, which is correct for the 0.2 lineWidth.

So : use beginPath before drawing a new figure.
In this case you have two choices :
• draw line by line OR
• draw once a path with all lines as subpath.

(see code below).

TIP : To get clean lines remember that pixels's center is at the (+0.5, +0.5) coordinates of each pixels, so a 'trick' is to translate by 0.5, 0.5 on app start, then only use rounded coordinates and lineWidth.

1) draw line by line

http://jsfiddle.net/gamealchemist/J6zzD/6/

var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.translate(0.5, 0.5);
ctx.lineWidth = 1;

for (var y = 18; y < 300; y += 18) {
    strokeLine(ctx, y);
}

function strokeLine(ctx, y) {
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(0, y);
    ctx.lineTo(300, y);
    ctx.stroke();
}

2) draw multiple subPath : (you can have only one color for one stroke() )

http://jsfiddle.net/gamealchemist/J6zzD/7/

var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.translate(0.5, 0.5);
ctx.lineWidth = 1;

ctx.strokeStyle = 'red';

ctx.beginPath();
for (var y = 18; y < 300; y += 18) {
    addLineSubPath(ctx, y);
}
ctx.stroke();

function addLineSubPath(ctx, y) {
    ctx.moveTo(0, y);
    ctx.lineTo(300, y);
}
like image 139
GameAlchemist Avatar answered Oct 05 '22 13:10

GameAlchemist