๐ŸŽจ
FabricJS - Drawing Canvas
  • Introduction
    • ๐Ÿ‘‹Welcome
    • Key Use Cases
    • Key Features
    • FAQs
  • Using the Plugin
    • Getting Started
    • Set up the Background
    • Set up Click Behavior
    • Saving the Canvas
    • Downloading the Canvas
  • Feature Reference
    • General Settings
    • Workflow Actions
    • Workflow Events
    • Exposed States
  • Use Cases
    • Templates
    • Canva/Visual Moodboard
    • PowerPoint & Slides
    • Image Editor
  • Useful tips
    • Custom Control Menu
    • Responsiveness
    • Element HTML id Attribute
Powered by GitBook
On this page
  1. Useful tips

Responsiveness

PreviousCustom Control MenuNextElement HTML id Attribute

Last updated 3 years ago

I saved a serialized Canvas on Desktop and need to re-open it on Mobile (or vice versa, for responsiveness). How do I make the elements inside smaller?

You can scale your elements larger or smaller by using the "Scale All Elements" workflow action:

This workflow action is helpful if you need to make your Canvas responsive when serializing it and saving it to the database. Here are the steps you should follow:

  1. When serializing the Canvas, save the Canvas Width in another field associated with that database Thing:

  2. When loading the Canvas on a new screen size, load the Serialized Canvas from step #1, then use the "Scale All Elements" workflow action to update the size of the Elements in your Canvas based on the current Canvas width (formula is Current Canvas Width รท Canvas Width when Serialized):