Applying italic styling to text created with IText in Fabric.js can be configured during initial creation or manipulated dynamically by user interaction.

Setting up the Canvas

Begin by initializing a Fabric.js canvas and adding an IText object.

<canvas id="mainCanvas" width="400" height="200"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
<script>
  const fabricCanvas = new fabric.Canvas('mainCanvas');
  const myText = new fabric.IText('Sample text for formatting');
  fabricCanvas.add(myText);
  fabricCanvas.renderAll();
</script>

Initial Italic Configuration

Applying Italics to All Text

You can set the entire text block to italic at the time of creation using the fontStyle property.

const styledText = new fabric.IText('Formatted text block', {
  fontStyle: 'italic' // Using 'oblique' is also valid
});
fabricCanvas.add(styledText);

Styling Specific Characters

To italiczie specific characters, use the styles property. Character and line indexing starts at 0.

const partiallyStyledText = new fabric.IText('Target specific letters', {
  styles: {
    0: { // First line (index 0)
      2: { fontStyle: 'italic' }, // Third character (index 2) - 'r'
      6: { fontStyle: 'italic' }  // Seventh character (index 6) - 'c'
    }
  }
});
fabricCanvas.add(partiallyStyledText);

Interactive Italic Toggle

For user-driven styling, implement a function to toggle the italic state. This example adds a button to trigger the toggle.

<button onclick="toggleItalicStyle()">Toggle Italic</button>
<canvas id="mainCanvas" width="400" height="200"></canvas>

<script>
  const fabricCanvas = new fabric.Canvas('mainCanvas');
  const myText = new fabric.IText('Click and select text');
  fabricCanvas.add(myText);

  function toggleItalicStyle() {
    const selectedObj = fabricCanvas.getActiveObject();
    if (!selectedObj || selectedObj.type !== 'i-text') return;

    if (selectedObj.isEditing) {
      // Handle styling for selected text within an active editor
      const currentStyles = selectedObj.getSelectionStyles();
      const hasItalic = currentStyles.some(style => style.fontStyle === 'italic');
      const newStyle = hasItalic ? 'normal' : 'italic';
      selectedObj.setSelectionStyles({ fontStyle: newStyle });
    } else {
      // Handle styling for the entire text object
      const isCurrentlyItalic = selectedObj.fontStyle === 'italic';
      selectedObj.set({
        fontStyle: isCurrentlyItalic ? 'normal' : 'italic'
      });
      // Ensure character-specific styles are also updated
      const charStyles = selectedObj.styles;
      for (const lineKey in charStyles) {
        for (const charKey in charStyles[lineKey]) {
          charStyles[lineKey][charKey].fontStyle = isCurrentlyItalic ? 'normal' : 'italic';
        }
      }
    }
    fabricCanvas.renderAll();
  }
</script>

The toggle function logic:

1. Retrieves the currently active object on the canvas.
2. Checks if the object is an IText instance in editing mode (isEditing is true).
3. In editing mode, it inspects the styles of the currently selected characters and toggles their fontStyle between 'italic' and 'normal'.
4. If not in editing mode, it toggles the fontStyle for the entire text object and also updates any existing character-level style definitions.
5. Finally, it calls canvas.renderAll() to udpate the display.

This approach provides full control over italic styling in both initial state and user interactions.