¿Cómo Dibujar Canvas en React.js?

En este artículo, vamos a aprender cómo podemos agregar un lienzo de dibujo en ReactJs. React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Enfoque: para agregar nuestro lienzo, vamos a usar el paquete react-canvas-paint. El paquete react-canvas-paint nos ayuda a integrar el lienzo de dibujo en nuestra aplicación. Primero, instalaremos el paquete react-canvas-paint y luego agregaremos un lienzo en nuestra página de inicio.

Crear aplicación ReactJs: puede crear un nuevo proyecto ReactJs usando el siguiente comando:

npx create-react-app gfg

Instale el paquete requerido: ahora instalaremos el paquete react-canvas-paint usando el siguiente comando:

npm i react-canvas-paint

Estructura del proyecto: Se verá así.

Agregar el lienzo de dibujo: después de instalar el paquete, podemos agregar fácilmente un lienzo en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar un lienzo a nuestra página de inicio.

Agregue el siguiente contenido en el archivo App.js :

import React from "react";
import ReactCanvasPaint from 'react-canvas-paint'
import 'react-canvas-paint/dist/index.css'
  
export default function DrawingCanvasGfg(){
  return (
    <div>
      <h1>ReactJs Drawing Canvas - GeeksforGeeks</h1>
      <ReactCanvasPaint />
    </div>
  );
};

Explicación: en el ejemplo anterior, primero estamos importando el componente ReactCanvasPaint y luego estamos usando el componente instalado en una nueva función para agregar nuestro lienzo de dibujo.

Pasos para ejecutar la aplicación: Ejecute el siguiente comando en la terminal para ejecutar la aplicación.

npm start

Producción: