CODEWITHSUNDEEP
javascripthtmlcanvas
Mohammad Haidar
Mohammad Haidar

Reputation: 35

how can we take advantage of beginPath() canvas method?

please I need your help I am new to HTML5 and I am a little confused , I have written the following code in my editor

var canvas = document.getElementById('paper');
var c= canvas.getContext('2d');

c.beginPath();
c.lineWidth="5";
c.moveTo(0,75);
c.lineTo(250,75);
c.stroke(); // Draw it

c.beginPath();
c.lineWidth="5";
c.moveTo(0,0);
c.lineTo(250,75);
c.stroke(); // Draw it

but when I removed the second c.beginPath() , no thing changed!!! so how can we take the advantage of beginPath() method.

can any one explain for me using clear example.

thank you so much every body.

Upvotes: 1

Views: 136

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

Here's the solution to the mystery :
• beginPath creates a new path.
• moveTo creates a new sub-path within the current path.

So when using two times beginPath, you are drawing two lines.
When using beginPath only once, you draw one single figure that contains two sub-path that are lines.

The principle of sub-path allows you to build whatever you want to fill/stroke as you want, then stroke all those sub-path at once.

You can use the way you prefer.

About style : when using fill or stroke, the current path will be drawn in the current style ( fillStyle / strokeStyle / lineWidth / font / ...).
So you are obliged, to draw with a different style, to create a new path with beginPath.
On the other hand, if you are drawing a lot of figures with the same style, it is more logical to set the style once, create all the sub-paths, and fill/stroke everything.

Rq : it is a good habit when drawing to :
1) set your style
2) build your path / sub-paths,
3) then fill and/or stroke.

Because mixing styles, paths and strokes/fills, will just confuse things.

Edit : When you come to more complex drawings, you have to change also the transform : you scale, rotate and translate.
It can become quite hard to know the current status of the canvas.
In fact, even when dealing only with regular style only, it might be difficult to both avoid setting everything on each draw AND know what is the current setting.

The solution is to save the context before your draw, and restore it afterwise :

1) save context
2) set style
3) set transform
4) build path / sub- path
5) restore context.

here's a simple-but-not-too simple example : 

function drawSmile(ctx, x, y, faceRadius, eyeRadius) {
    ctx.save();               // save 
    ctx.fillStyle = '#FF6';   // face style : fill color is yellow
    ctx.translate(x, y);      // now (x,y) is the (0,0) of the canvas.
    ctx.beginPath();          // path for the face
    ctx.arc(0, 0, faceRadius, 0, 6.28);
    ctx.fill();
    ctx.fillStyle = '#000';  // eye style : fill color is black
    ctx.beginPath();         // path for the two eyes
    ctx.arc(faceRadius / 2, - faceRadius /3, eyeRadius, 0, 6.28);
    ctx.moveTo(-faceRadius / 2, - faceRadius / 3); // sub path for second eye
    ctx.arc(-faceRadius / 2, - faceRadius / 3, eyeRadius, 0, 6.28);
    ctx.fill();
    ctx.restore(); // context is just like before entering drawSmile now.
}

drawSmile(ctx, 100, 100, 60, 12);

.

For the record, code to draw Two lines : 

c.lineWidth="5";
c.beginPath();  // new path
c.moveTo(0,75);
c.lineTo(250,75);
c.stroke(); // Draw it

c.lineWidth="10";
c.beginPath(); // new path
c.moveTo(0,0);
c.lineTo(250,75);
c.stroke(); // Draw it

One path having two lines as sub-paths : 

c.lineWidth="5";
c.beginPath();  // new path
c.moveTo(0,75);
c.lineTo(250,75);
c.moveTo(0,0); // new sub-path within current path
c.lineTo(250,75);
c.stroke(); // Draw the two lines at once.

Upvotes: 1

Related Questions