Another Canvas Guide [2]: Styling, Gradients, Shadows

Introduction

In the previous part, we looked at how to work with paths, but drawing with black only is not a joy that is why in this part we will first consider how to decorate our canvas, then look at how to style lines, then learn how to work with shadows, then learn how to work with gradients and Finally, we will understand how to work with the so-called templates.

Let's make our canvas multicolored

As you have already noticed, there are two types of draw and rect drawing operations on canvas, and each has its own style settings. To change them, you need to change the context properties of fillStyle and strokeStyle; these properties can take on not only colors, but also other values ​​that we will consider later. And now we will look at how to change the color. To do this, you simply need to assign the new values ​​to the fillStyle and strokeStyle properties, in the case of colors, these will be strings, while the canvas supports the following color description schemes: orange, # FFA500, rgb (255,165,0), rgba (255,165,0,1).
For example, let's draw a multicolored circle, leave only the context retrieval in our script, and then add the following code:

for(var i=0;i<6;i++){ ctx.fillStyle = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) +')' ctx.beginPath() ctx.arc(300,300,70,Math.PI/3*i,Math.PI/3*(i+1),false) ctx.lineTo(300,300) ctx.fill() } 

As an attentive reader guessed, this code will draw a circle consisting of 6 segments with random colors.

Work with lines

We can also change some parameters of the lines. There are several properties for this, let's consider each of them in order.
')

Change the line width

The width of the line is stored in the lineWidth property of the canvas context and one unit corresponds to one pixel. The default is naturally 1.0.

Line Top Style

The style of the top of the line is stored in the lineCap property and for it there are three possible values: butt, round, sqare, the default style is butt.

Line style

The line join style is stored in the lineJoin property and can take three possible values: miter, round, bevel, the default style is miter.

More about miter

We can limit the length of the huge miter tail using the miteLimit property which defaults to 10.

Drop the shadows

To be precise, the canvas shadows are always discarded, they are simply discarded with zero offset and zero blur. It’s not worth looking at the shadows for a long time, as everything is very clear here, there are four properties that control the shadows (the standard values ​​are indicated by an equal sign):

 shadowOffsetX = 0.0 shadowOffsetY = 0.0 shadowBlur = 0.0 shadowColor = "transparent black" 

For example, let's drop two shadows on each other in a limited drawing area and see what happens:

 ctx.beginPath() ctx.arc(200,300,70,0,Math.PI*2,true) ctx.stroke() ctx.clip() ctx.shadowOffsetX = -10 ctx.shadowOffsetY = -10 ctx.shadowBlur = 2 ctx.shadowColor = 'black' ctx.beginPath() ctx.moveTo(100,320) ctx.lineTo(500,320) ctx.moveTo(500,180) ctx.lineTo(100,370) ctx.stroke() 

Use gradients

As in the last part, we looked at ways as well as in this we will look at gradients.

Linear gradients

Creating a gradient object

 createLinearGradient(float x1, float y1, float x2, float y2) 

- creates a linear gradient object passing from the point (x1; y1) to the point (x2; y2), add the line to our code:

 var gr = ctx.createLinearGradient(0,0,150,150) 

Add colors to the gradient

 addColorStop(float offset, string color) 

- will add color to our gradient with a padding offset which takes values ​​from 0 to 1.
Add lines to our script:

 gr.addColorStop(0.0,'blue') gr.addColorStop(0.5,'red') gr.addColorStop(1.0,'green') 

Apply gradient as fill style.

The fillStyle property of the canvas context can take as a value not only a color, but also a gradient; add a line to the script:

 ctx.fillStyle = gr 

Final step, draw a filled rectangle

Add the last line to our script:

 ctx.fillRect(0,0,150,150) 

Radial gradients

When working with radial gradients, the difference from linear ones is only in creation.

 createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2) 

- creates a radial gradient with a smooth color transition from a circle with a center at a point (x1; y1) and a radius of r1 to a circle with a center of a point (x2; y2) and a radius of r2. For example, let's draw a ball and make pseudo-lighting:

 ctx.shadowOffsetX = 10 ctx.shadowOffsetY = 15 ctx.shadowBlur = 10 ctx.shadowColor = '#0F0' var gr = ctx.createRadialGradient(60,60,15,75,75,75) gr.addColorStop(0.0,'#0F0') gr.addColorStop(1.0,'#0DA805') ctx.fillStyle = gr ctx.beginPath() ctx.arc(75,75,75,0,Math.PI*2,false) ctx.fill() 

We use templates

In addition to colors and gradients, fillStyle and strokeStyle can also accept so-called patterns as values, patterns can be made from the same canvas element, image or video. For example, we will use the image . The pattern is created using the createPattern method (object any, string repeat), repeat can take the following values: “repeat”, “repeat-x”, “repeat-y”, “no-repeat”. The default value is repeat. For example, run the following script:

 var img = new Image() img.src = 'brick.jpg' var ptr = ctx.createPattern(img,'repeat') ctx.fillStyle = ptr; ctx.fillRect(50,50,100,100)