Category: HTML5 Canvas Element

HTML5 Canvas Element

Clipping paths

Clipping paths

A clipping path is like a normal canvas shape but it acts as a mask to hide unwanted parts of shapes.   We use the clip method to create a new clipping path. By...

Translate

Translate

This method is used to move the canvas and its origin to a different point in the grid. translate(x, y) This method takes two arguments. x is the amount the canvas is moved to...

Saving and restoring state

Saving and restoring state

The canvas save and restore methods are used to save and retrieve the canvas state. The canvas drawing state is basically a snapshot of all the styles and transformations that have been applied. Both...

Shadows Property

Shadows Property

Using shadows involves just four properties: shadowOffsetX = float shadowOffsetY = float shadowBlur = float shadowColor = color shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X...

createRadialGradient Property

createRadialGradient Property

n this example, We’ve defined four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in...

createLinearGradient Property

createLinearGradient Property

In this example, We’ve created two different gradients. In the first, We create the background gradient. As you can see, W’ve assigned two colors at the same position. You do this to make very...

Gradients in Canvas

Gradients in Canvas

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a canvasGradient object by using one of the following methods. We use this object to...

lineJoin property

lineJoin property

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are...

lineCap property

lineCap property

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set...

lineWidth

lineWidth

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.   The line width is the thickness of the stroke centered on the...

Scaling Images

Scaling Images

the second variant of the drawImage method adds two new parameters and it allows us to place scaled images on the canvas. drawImage(image, x, y, width, height) Where width and height is the image’s...

Bezier and quadratic curves

Bezier and quadratic curves

These are generally used to draw complex organic shapes.   The difference between these can best be described using the image on the right. A quadratic B├ęzier curve has a start and an end...

Drawing Arcs

Drawing Arcs

For drawing arcs or circles we use the arc method. The specification also describes the arcTo method, which is supported by Safari and Firefox, but wasn’t implemented in the older Gecko browsers. arc(x, y,...

Drawing Lines

Drawing Lines

For drawing straight lines we use the lineTo method.   lineTo(x, y);   This method takes two arguments – x and y, – which are the coordinates of the line’s end point. The starting...