canvas-2d-drawing v1.0.0

Canvas 2D drawing

Está bliblioteca irá permitir que você possa criar desenhos em forma de linha direto do seu browser

• Instalação

npm i canvas-2d-drawing

• Como utilizar ?

  Em seu HTML adicione a tag canvas passando um id, onde o mesmo será utilizado como parâmetro na execução da função canvas2dDrawing dentro do arquivo JavaScript. Defina também qual será o tamanho do seu canvas utilizando css.

  <canvas id="nameCanvas" style="width: 500px; height: 500px;"></canvas>

  Em seu arquivo JavaScript importe a função

  const { canvas2dDrawing } = require("canvas-2d-drawing");

  Para iniciar o seu Canvas 2d Drawing ultilize a função canvas2dDrawing passando um objeto contendo o id do seu canvas:

  canvas2dDrawing({
      id: "nameCanvas"
  });

  Desta forma o seu canvas está pronto.

• Para alterar a espessura da linha e sua cor, adicione o objeto line, contendo um width e color:

    canvas2dDrawing({
        id: "nameCanvas",
        line: {
            width: 5,
            color: "blue"
        }
    });

  O canvas inicia por padrâo com width = 3 e color = "black"

Ps: as cores também podem ser em hexadecimal, RGB ou RGBA, exemplo:

1. Hexadecimal

     canvas2dDrawing({
         ...
         line: {
             ...
             color: "#dddddd"
         }
     });

2. RGB

     canvas2dDrawing({
         ...
         line: {
             ...
             color: "rgb(0,0,0)"
         }
     });

3. RGBA

     canvas2dDrawing({
         ...
         line: {
             ...
             color: "rgba(0,0,0,0.5)"
         }
     });