# Custom Drawing

This script utilizes the ApexPainter class from the apexify.js library to draw customizable (Lines | Shapes) on a canvas background.

const { ApexPainter } = require('apexify.js'); 

import { ApexPainter } from 'apexify.js'; 

1.Create an instance of the ApexPainter class:

const painter = new ApexPainter();

2.Define Custom Options: Create an array of custom options, each specifying the start and end coordinates of the line, as well as its style.

• You can use your custom background by converting it into a buffer and use it in createCustom.

 ```javascript
 const options = [
     {
         startCoordinates: { x: 100, y: 100 },
         endCoordinates: { x: 300, y: 100 },
         lineStyle: {
             color: 'red',
             width: 3,
             lineRadius: 10,
             stroke: {
                 color: 'blue',
                 width: 2
             },
             shadow: {
                 color: 'rgba(0, 0, 0, 0.5)',
                 offsetX: 2,
                 offsetY: 2,
                 blur: 5
             }
         }
     },
     {
         startCoordinates: { x: 200, y: 200 },
         endCoordinates: { x: 400, y: 300 },
         lineStyle: {
             color: 'green',
             width: 2,
             lineRadius: 12
         }
     }
 ];
 ```

3.Custom Option Object: Each object in the options array represents a custom line. It contains the following properties:

• startCoordinates: Object specifying the x and y coordinates of the starting point of the line.
• endCoordinates: Object specifying the x and y coordinates of the ending point of the line.
• lineStyle: Object specifying the style of the line, including color, width, line radius, stroke (optional), and shadow (optional).

4.Drawing Custom Lines: Once you've defined your custom options, you can use them to draw custom lines on a canvas.

5.Generate The Final Custom Canvas Made:

const bufferCustom = await painter.createCustom(buffer, options);
console.log(bufferCustom); // Returns a buffer image.