Configurando o Desenho - JavaScript

O contexto do elemento canvas, representado pelo objeto CanvasRenderingContext2D, oferece diversas propriedades que permitem configurar o desenho no canvas. Algumas dessas propriedades incluem:

strokeStyle: Define a cor das linhas ou do contorno. Por padrão, a cor é preta.
fillStyle: Define a cor de preenchimento das figuras. Por padrão, a cor é preta.
lineWidth: Define a espessura das linhas. O valor padrão é 1.0.
lineJoin: Define o estilo de junção das linhas.
globalAlpha: Define a opacidade do desenho no canvas.
setLineDash: Cria uma linha composta por traços curtos.

Na seção anterior, ao desenhar retângulos, não especificamos cores, então a cor padrão (preta) foi utilizada tanto para as linhas quanto para o preenchimento dos retângulos. Agora, vamos utilizar outras cores. As cores podem ser definidas em diferentes formatos:

Pelo nome da cor, como "red" ou "green".
Pelo valor hexadecimal da cor, como "#00FFFF".
Pelo formato rgb, como "rgb(0, 0, 255)".
Pelo formato rgba, como "rgba(0, 0, 255, 0.5)".

Por exemplo, podemos definir a cor do contorno ou da borda das figuras usando a propriedade strokeStyle:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Exemplo Canvas</title>
    </head>
    <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        context.strokeStyle = '#ff0000'; // Define a cor do contorno da figura
        context.strokeRect(10, 10, 100, 100);
    </script>
    </body>
</html>

Neste exemplo, a cor do contorno é definida como vermelha ("#ff0000").

Configurando a cor do contorno da figura no canvas em JavaScript com strokeStyle

Agora, vamos definir a cor de preenchimento utilizando a propriedade fillStyle:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "#ee5253";  // Define a cor de preenchimento da figura
context.fillRect(10, 10, 100, 100);

Configurando a cor do preenchimento da figura no canvas em JavaScript com fillStyle

Podemos combinar vários métodos:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "#c7ecee";  // Define a cor de preenchimento da figura
context.fillRect(10, 10, 100, 100);
context.strokeStyle = "#22a6b3";  // Define a cor do contorno da figura
context.strokeRect(10, 10, 100, 100);

context.fillRect(120, 10, 100, 100);  // Retângulo sem contorno
context.strokeRect(230, 10, 100, 100);  // Retângulo sem preenchimento

Definindo cor para o canvas em JavaScript

Espessura das Linhas

A propriedade lineWidth permite definir a espessura da linha:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.fillStyle = "#c7ecee";  // Define a cor de preenchimento da figura
context.fillRect(10, 10, 100, 100);
context.strokeStyle = "#22a6b3";  // Define a cor do contorno da figura
context.lineWidth = 4.5;  // Define a espessura da linha
context.strokeRect(10, 10, 100, 100);

Definindo espessura da linha para o canvas em JavaScript

Linhas Tracejadas

O método setLineDash() aceita um array de números que define o comprimento dos traços e dos espaços entre eles. Por exemplo:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.strokeStyle = "red";
context.setLineDash([15, 5]);
context.strokeRect(10, 10, 100, 100);

context.strokeStyle = "blue";
context.setLineDash([2, 5, 6]);
context.strokeRect(130, 10, 100, 100);

context.strokeStyle = "green";
context.setLineDash([2]);
context.strokeRect(250, 10, 100, 100);

Definindo distâncias entre linhas no canvas com setLineDash em JavaScript

Tipo de Junção das Linhas

A propriedade lineJoin controla o tipo de junção das linhas em uma figura. Pode ter os seguintes valores:

miter: junção em ângulos retos. Este é o valor padrão.
bevel: junção chanfrada.
round: junção arredondada.

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

context.strokeStyle = "red";

context.lineWidth = 10;
context.lineJoin = "miter";
context.strokeRect(10, 10, 100, 100);
context.lineJoin = "bevel";
context.strokeRect(130, 10, 100, 100);
context.lineJoin = "round";
context.strokeRect(250, 10, 100, 100);

Conexão de linhas no canvas e propriedade lineJoin em JavaScript

Transparência

A propriedade globalAlpha define a opacidade do desenho. Pode ter valores de 0 (totalmente transparente) até 1.0 (opaco):

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.fillStyle = 'blue';
context.fillRect(30, 30, 100, 100);

context.globalAlpha = 0.5;
context.fillStyle = 'red';
context.fillRect(70, 70, 100, 100);

Aqui, dois retângulos são desenhados no canvas: um azul e um vermelho. No entanto, antes de desenhar o retângulo vermelho, a opacidade foi definida como semi-transparente, permitindo que o retângulo azul seja visível através do vermelho:

Definindo transparência no canvas em JavaScript