A canvas path is a list of points that is used to define the boundary of vector shapes. Paths are used to draw many types of shapes such as circles, rectangles, polygons, squares etc. Paths have their own predefined methods used to begin path, close path, stroke, fill, move paths.
Before you start to draw paths on HTML5 canvas, first you have to begin path for it then draw some drawings and then close path.
beginPath() method is used to create a new path, once path is created you can use any drawing command to draw any shape on HTML5 canvas. Each drawing command is directed between begin path and close path methods.
var variableName = canvas.getContext(2d);
variableName.beginPath();
closePath() method is used to close created path, once path is closed the drawing commands are directed to context.
var variableName = canvas.getContext(2d);
variableName.closePath();
stroke() method is used to draw shape by stroking its outline.
var variableName = canvas.getContext(2d);
variableName.stroke();
fill() method is used to draw a solid shape by filling the path's content area with colors.
var variableName = canvas.getContext(2d);
variableName.fill();
moveTo() method is used to change position of paths using co-ordinates (x,y).
var variableName = canvas.getContext(2d);
variableName.moveTo(x,y);
You can use canvas element to draw image, text, graphs etc.
Open notepad or any other text editor, follow the following points.
save file with name task.html or task.htm and then open it using any browser and see results.