- #Drawing shapes and writing text on image online editing how to
- #Drawing shapes and writing text on image online editing full
- #Drawing shapes and writing text on image online editing code
There even is a strokeStyle attribute just like fillStyle. Here is an example of previously used paths and shapes that are stroked, not filled.Īs you can see fill() and fillRect() have their counterparts stroke() and strokeRect(). Here's a simple overview on the difference between fill and stroke: Stroking paths and shapes and set the color
You can mix up fill and stroke to create more complex graphics. The center of your path can still be empty. When using a stroke, you only draw the outline of an shape. When using a fill it is like you color the surface of a shape. But what exactly is the difference between those ways of drawing? You have been using fill() and stroke() to draw on the canvas. The difference between using fill and stroke It closes the path and connects start to end.īy stacking multiple commands after calling the beginPath() function you can create almost any desired shape. The last line is drawn automatically when you call fill(). Notice how lineTo() is called only twice, but you need three lines for a triangle.
#Drawing shapes and writing text on image online editing code
The code for a triangle is almost similar to that of a separate line, only this time lineTo() is called multiple times.
#Drawing shapes and writing text on image online editing how to
Here's an example of how to draw a triangle: This enables you to create a triangle by working with multiple separate lines. And what about a triangle?īy using multiple commands you can draw up more complex shapes. fill() wouldn't work here since the path only consists of a single line and has no real surface. When you have completed your path, consisting of just a line in this case, you can call stroke() to stroke the path and actually make it visible. From there you can draw a line with the lineTo() function. It doesn't really draw anything on its own, it only tells on which coordinates to start. The next call to moveTo() is telling the context where to start drawing the path on your canvas. Here's an example of how to draw a line:ĭrawing a line starts again with calling beginPath() to mark the start of a new path. It is done by calling the lineTo() function. How to draw a basic line?Īnother basic path action is that of drawing a line.
This example circle starts at an angle of zero and ends at an angle of two times pie, making a perfect circle.Īfter running this code you can see your circle drawn on the canvas.
#Drawing shapes and writing text on image online editing full
The arc() function is the one who defines an arc-shaped path, in this case a full circle. You can see it begins by starting a new path with the beginPath() function and ends with fill() to draw the path to the canvas.Ĭontext.arc(200, 100, 50, 0, 2 * Math.PI) The next code demonstrates how to draw a circle. Here are some quick examples to get the basic idea of how to apply paths. After defining the path, you can call fill() or stroke() to draw the path to the canvas. This can be a circle or a line for example. Paths start by calling beginPath() on the context (this will clear the context of any existing paths).