Components > Canvas

YourCustomComponent.vue

<script lang="tsx" setup>
  import { Canvas } from '@/components/app';
  import { useCanvasProvider } from '@/composables/useCanvasProvider';
</script>

🎨 Add a flexible and customizable canvas component to your app, which can handle both user-drawn sketches and uploaded images. Users can easily choose from over 1000 icons and SVGs directly within the canvas component. Ideal for creating image AI apps, design apps, and more. This component helps you easily incorporate a wide range of visual input from users into your application.

Features

-> Features for drawing and editing that include support for shapes, icons, brand logos, and personalized images.
-> Extra options like undo/redo, clear the canvas, download your design, and full-screen view.
-> Buttons that you can customize to show or hide certain features.
-> Connected with Vue Provide / Inject for easy access to canvas features and states.

Customizing Canvas

You can customize the Canvas component by changing settings in the configuration object. This lets you choose which overlay buttons are visible based on what your application needs.

config.ts

    ...
    canvas: {
      hideShapes: false,      // Hide the shapes button
      hideIcons: false,       // Hide the icons button
      hideBrands: false,      // Hide the brands button
      hideUpload: false,      // Hide the upload button
      hideEraser: false,      // Hide the eraser button
      hideDownload: false,    // Hide the download button
      hideClear: false,       // Hide the clear canvas button
      hideUndoRedo: false,    // Hide the undo/redo buttons
      hideGrid: false,        // Hide the grid button
      hideFullscreen: false,  // Hide the fullscreen button
    },
    ...
  

Vue Provide/Inject Usage

With a simple Vue Provide/Inject useCanvasProvider: With many features separate from the overall application logic, everything related to the canvas can be managed by simply importing the canvas context into your application, as shown below:

YourCustomComponent.vue

import { useCanvasProvider } from '@/composables/useCanvasProvider';
const {
    setMenuState, //  Setter for active drawing state (select, brush, line, eraser etc.)
    menuState, // Getter for active drawing state.
    fabricCanvas, // The instance of the Fabric.js canvas.
    undo, // Function to undo the last action.
    redo,  // Function to redo the last action.
    clear, // Function to clear the canvas.
    download, // Function to download canvas as PNG
    brushWidth, // Getter for brush size.
    setBrushWidth, // Setter for brush size.
    eraserWidth, // Getter for eraser size.
    setEraserWidth, // Setter for eraser size.
    addSvg, // Function to add svg images to canvas.
    addImage, // Function to add base64 encoded images to canvas.
    addImageUrl, // Function to add remote images to canvas.
    fullScreen, // Getter for fullscreen state.
    setFullScreen, // Setter for fullscreen state.
    addGridBackground, // Setter for grid state.
    removeGridBackground, // Setter for grid state.
    gridBackgroundActive, // Getter for grid state.
    activeSelection, // Getter for active canvas selection.
    setActiveSelection, // Setter for active canvas selection.
} = useCanvasProvider();
  

Usage

YourCustomComponent.vue

<script setup>
  import { provide } from 'vue';
  import { Canvas } from '@/components/app';
  import { useCanvasProvider } from '@/composables/useCanvasProvider';
  
  const canvasContext = useCanvasProvider();
  provide('canvasContext', canvasContext);
  
  const handleWindowSizeChange = () => {
      const object = document.getElementById("canvas-showcase-wrapper");
      let containerWidth = 0;
      let containerHeight = 0;
      if (canvasContext.fullScreen.value) {
          containerWidth = window.innerWidth;
          containerHeight = window.innerHeight;
      } else if (object.clientWidth > 600) {
          containerWidth = 600 * 0.87;
          containerHeight = 600 * 0.87;
      } else {
          containerWidth = object.clientWidth * 0.87;
          containerHeight = object.clientHeight * 0.87;
      }
  
      const min = Math.min(containerWidth, containerHeight);
  
      const scale = min / canvasContext.fabricCanvas.value.getWidth();
  
      if (scale === 1) return;
      const zoom = canvasContext.fabricCanvas.value.getZoom() * scale;
      canvasContext.fabricCanvas.value.setDimensions({
          width: min,
          height: min,
      });
      canvasContext.fabricCanvas.value.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
  };
  
  watch(() => canvasContext.fullScreen.value, () => {
      handleWindowSizeChange();
  }, {})
  
  onMounted(() => {
      canvasContext.setMenuState("Brush");
      window.addEventListener("resize", handleWindowSizeChange);
      handleWindowSizeChange();
  });
  onUnmounted(() => {
      window.removeEventListener("resize", handleWindowSizeChange);
  });
  </script>