typography-canvas-renderer
Version:
A lightweight npm package for rendering typographic content (text and images) on HTML5 Canvas with full CSS styling support including borders, border-radius, multiple border styles, inline text rendering, auto height calculation, and image support
1,110 lines (1,106 loc) • 54.6 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Renderer - Complete Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1600px;
margin: 0 auto;
}
.example {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.canvas-container {
text-align: center;
margin: 20px 0;
}
canvas {
border: 1px solid #ddd;
max-width: 100%;
height: auto;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #0056b3;
}
.section-title {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 20px;
}
.description {
background: #e8f4f8;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
border-left: 4px solid #3498db;
}
.controls {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
.control-group {
margin: 10px 0;
}
label {
display: inline-block;
width: 120px;
font-weight: bold;
}
select, input {
padding: 5px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h1>Canvas Renderer - Complete Example</h1>
<p>This comprehensive example demonstrates all possible options and functionality of the canvas renderer.</p>
<!-- Controls Section -->
<div class="example">
<h2 class="section-title">Controls</h2>
<div class="controls">
<div class="control-group">
<label>Preset:</label>
<select id="presetSelect" onchange="loadPreset()">
<option value="inline">Inline Text Examples</option>
<option value="block">Block Text Examples</option>
<option value="mixed">Mixed Content</option>
<option value="borders">Border Styles</option>
<option value="multiline">Multiline Text</option>
<option value="alignment">Text Alignment</option>
<option value="opacity">Opacity Effects</option>
<option value="images">Image Examples</option>
<option value="mixed-media">Mixed Text & Images</option>
<option value="fixes">Height & Alignment Fixes</option>
<option value="custom">Custom Configuration</option>
</select>
<button onclick="renderCurrent()">Render</button>
<button onclick="downloadCanvas()">Download PNG</button>
</div>
<div class="control-group">
<label>Canvas Size:</label>
<input type="number" id="canvasWidth" value="1200" placeholder="Width">
<input type="number" id="canvasHeight" value="800" placeholder="Height">
<button onclick="updateCanvasSize()">Update Size</button>
</div>
</div>
</div>
<!-- Main Canvas -->
<div class="example">
<h2 class="section-title">Canvas Output</h2>
<div class="canvas-container">
<canvas id="mainCanvas" width="1200" height="800"></canvas>
</div>
</div>
<!-- JSON Editor -->
<div class="example">
<h2 class="section-title">JSON Configuration</h2>
<div class="description">
<strong>Custom Configuration:</strong> Edit the JSON below to create your own text and image configurations.
Click "Render" to see the results on the canvas.
</div>
<div style="margin-bottom: 15px;">
<textarea id="jsonEditor" style="width: 100%; height: 300px; font-family: monospace; font-size: 12px;" placeholder="Enter your JSON configuration here..."></textarea>
</div>
<button onclick="renderFromJSON()">Render from JSON</button>
<button onclick="validateJSON()">Validate JSON</button>
<button onclick="formatJSON()">Format JSON</button>
</div>
</div>
<!-- Load the minified UMD build -->
<script src="dist/index.umd.min.js"></script>
<script>
// All possible configurations
const configurations = {
inline: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Basic Inline Text',
css: {
'font-size': '24px',
'color': '#2c3e50',
'left': '50px',
'top': '50px',
'z-index': '1'
}
},
{
text: 'With Background',
css: {
'font-size': '20px',
'color': '#ffffff',
'left': '300px',
'top': '50px',
'background-color': '#3498db',
'border-radius': '5px',
'z-index': '2'
}
},
{
text: 'And Border',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '500px',
'top': '50px',
'background-color': '#ecf0f1',
'border': '2px solid #bdc3c7',
'border-radius': '8px',
'z-index': '3'
}
},
{
text: 'Multiline\nInline Text\nExample',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '50px',
'top': '150px',
'background-color': '#e74c3c',
'border': '2px solid #c0392b',
'border-radius': '10px',
'z-index': '4'
}
},
{
text: 'Custom Padding',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '300px',
'top': '150px',
'background-color': '#fef9e7',
'border': '2px dotted #f39c12',
'border-radius': '8px',
'padding': '10px',
'z-index': '5'
}
},
{
text: 'Thick Border',
css: {
'font-size': '20px',
'color': '#ffffff',
'left': '500px',
'top': '150px',
'background-color': '#8e44ad',
'border': '5px solid #663399',
'border-radius': '15px',
'z-index': '6'
}
}
],
images: []
},
block: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Block Text with Width',
css: {
'font-size': '18px',
'color': '#ffffff',
'left': '50px',
'top': '50px',
'width': '300px',
'height': '80px',
'background-color': '#27ae60',
'border': '2px solid #229954',
'border-radius': '10px',
'text-align': 'center',
'z-index': '1'
}
},
{
text: 'Long text that will wrap to multiple lines when width is constrained and height is not specified',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '400px',
'top': '50px',
'width': '300px',
'height': '120px',
'background-color': '#ecf0f1',
'border': '2px solid #bdc3c7',
'border-radius': '8px',
'text-align': 'left',
'z-index': '2'
}
},
{
text: 'Right Aligned\nBlock Text\nWith Multiple Lines',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '750px',
'top': '50px',
'width': '200px',
'height': '100px',
'background-color': '#e74c3c',
'border': '3px solid #c0392b',
'border-radius': '12px',
'text-align': 'right',
'z-index': '3'
}
},
{
text: 'Center Aligned Block',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '50px',
'top': '200px',
'width': '250px',
'height': '80px',
'background-color': '#fef9e7',
'border': '2px dashed #f39c12',
'border-radius': '15px',
'text-align': 'center',
'z-index': '4'
}
},
{
text: 'Custom Line Height\nExample\nWith More Spacing',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '350px',
'top': '200px',
'width': '200px',
'height': '120px',
'background-color': '#8e44ad',
'border': '2px solid #663399',
'border-radius': '10px',
'text-align': 'center',
'line-height': '30px',
'z-index': '5'
}
}
],
images: []
},
mixed: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Inline Text',
css: {
'font-size': '20px',
'color': '#2c3e50',
'left': '50px',
'top': '50px',
'background-color': '#e8f4f8',
'border': '2px solid #3498db',
'border-radius': '5px',
'z-index': '1'
}
},
{
text: 'Block Text',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '200px',
'top': '50px',
'width': '200px',
'height': '60px',
'background-color': '#e74c3c',
'border': '2px solid #c0392b',
'border-radius': '10px',
'text-align': 'center',
'z-index': '2'
}
},
{
text: 'More Inline',
css: {
'font-size': '18px',
'color': '#f39c12',
'left': '450px',
'top': '50px',
'background-color': '#fef9e7',
'border': '1px solid #e67e22',
'z-index': '3'
}
},
{
text: 'Another Block',
css: {
'font-size': '14px',
'color': '#8e44ad',
'left': '50px',
'top': '150px',
'width': '300px',
'height': '80px',
'background-color': '#f4ecf7',
'border': '2px dashed #663399',
'border-radius': '15px',
'text-align': 'center',
'z-index': '4'
}
},
{
text: 'Final Inline Text',
css: {
'font-size': '16px',
'color': '#27ae60',
'left': '400px',
'top': '150px',
'background-color': '#d5f4e6',
'border': '2px solid #229954',
'border-radius': '8px',
'z-index': '5'
}
}
],
images: []
},
borders: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Solid Border',
css: {
'font-size': '20px',
'color': '#ffffff',
'left': '50px',
'top': '50px',
'background-color': '#e74c3c',
'border': '3px solid #c0392b',
'border-radius': '10px',
'z-index': '1'
}
},
{
text: 'Dashed Border',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '250px',
'top': '50px',
'background-color': '#ecf0f1',
'border': '2px dashed #7f8c8d',
'border-radius': '15px',
'z-index': '2'
}
},
{
text: 'Dotted Border',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '450px',
'top': '50px',
'background-color': '#9b59b6',
'border': '2px dotted #8e44ad',
'border-radius': '20px',
'z-index': '3'
}
},
{
text: 'Double Border',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '650px',
'top': '50px',
'background-color': '#f39c12',
'border': '4px double #e67e22',
'border-radius': '5px',
'z-index': '4'
}
},
{
text: 'Thick Border',
css: {
'font-size': '20px',
'color': '#ffffff',
'left': '50px',
'top': '150px',
'background-color': '#34495e',
'border': '6px solid #2c3e50',
'border-radius': '12px',
'z-index': '5'
}
},
{
text: 'No Background\nJust Border',
css: {
'font-size': '18px',
'color': '#27ae60',
'left': '250px',
'top': '150px',
'border': '3px solid #229954',
'border-radius': '8px',
'z-index': '6'
}
},
{
text: 'Custom Padding\nExample',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '450px',
'top': '150px',
'background-color': '#8e44ad',
'border': '2px solid #663399',
'border-radius': '10px',
'padding': '15px',
'z-index': '7'
}
},
{
text: 'Large Radius',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '650px',
'top': '150px',
'background-color': '#fef9e7',
'border': '2px solid #f39c12',
'border-radius': '30px',
'z-index': '8'
}
}
],
images: []
},
multiline: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Single Line\nMultiline\nInline Text',
css: {
'font-size': '18px',
'color': '#ffffff',
'left': '50px',
'top': '50px',
'background-color': '#3498db',
'border': '2px solid #2980b9',
'border-radius': '10px',
'z-index': '1'
}
},
{
text: 'Block Text\nWith Multiple\nLines And\nWidth Constraint',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '300px',
'top': '50px',
'width': '200px',
'height': '120px',
'background-color': '#ecf0f1',
'border': '2px solid #bdc3c7',
'border-radius': '8px',
'text-align': 'center',
'z-index': '2'
}
},
{
text: 'Custom Line Height\nExample\nWith More Spacing',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '550px',
'top': '50px',
'background-color': '#e74c3c',
'border': '3px solid #c0392b',
'border-radius': '12px',
'line-height': '28px',
'z-index': '3'
}
},
{
text: 'Very Long Text That Will Wrap Automatically When Width Is Set And Exceeds The Available Space',
css: {
'font-size': '14px',
'color': '#2c3e50',
'left': '50px',
'top': '250px',
'width': '300px',
'height': '100px',
'background-color': '#fef9e7',
'border': '2px dashed #f39c12',
'border-radius': '10px',
'text-align': 'left',
'z-index': '4'
}
},
{
text: 'Mixed\nInline\nAnd Block\nExamples',
css: {
'font-size': '18px',
'color': '#ffffff',
'left': '400px',
'top': '250px',
'background-color': '#8e44ad',
'border': '2px solid #663399',
'border-radius': '15px',
'z-index': '5'
}
}
],
images: []
},
alignment: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Left Aligned\nBlock Text',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '50px',
'top': '50px',
'width': '200px',
'height': '80px',
'background-color': '#e8f4f8',
'border': '2px solid #3498db',
'border-radius': '8px',
'text-align': 'left',
'z-index': '1'
}
},
{
text: 'Center Aligned\nBlock Text',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '300px',
'top': '50px',
'width': '200px',
'height': '80px',
'background-color': '#e74c3c',
'border': '2px solid #c0392b',
'border-radius': '8px',
'text-align': 'center',
'z-index': '2'
}
},
{
text: 'Right Aligned\nBlock Text',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '550px',
'top': '50px',
'width': '200px',
'height': '80px',
'background-color': '#fef9e7',
'border': '2px solid #f39c12',
'border-radius': '8px',
'text-align': 'right',
'z-index': '3'
}
},
{
text: 'Top Vertical Aligned',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '50px',
'top': '200px',
'width': '200px',
'height': '100px',
'background-color': '#8e44ad',
'border': '2px solid #663399',
'border-radius': '10px',
'text-align': 'center',
'vertical-align': 'top',
'z-index': '4'
}
},
{
text: 'Middle Vertical Aligned',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '300px',
'top': '200px',
'width': '200px',
'height': '100px',
'background-color': '#d5f4e6',
'border': '2px solid #27ae60',
'border-radius': '10px',
'text-align': 'center',
'vertical-align': 'middle',
'z-index': '5'
}
},
{
text: 'Bottom Vertical Aligned',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '550px',
'top': '200px',
'width': '200px',
'height': '100px',
'background-color': '#34495e',
'border': '2px solid #2c3e50',
'border-radius': '10px',
'text-align': 'center',
'vertical-align': 'bottom',
'z-index': '6'
}
}
],
images: []
},
opacity: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Full Opacity\n100% Visible',
css: {
'font-size': '20px',
'color': '#2c3e50',
'left': '50px',
'top': '50px',
'width': '200px',
'height': '80px',
'background-color': '#3498db',
'border': '3px solid #2980b9',
'border-radius': '10px',
'text-align': 'center',
'opacity': '1.0',
'z-index': '1'
}
},
{
text: 'Semi-transparent\n50% Opacity',
css: {
'font-size': '18px',
'color': '#ffffff',
'left': '300px',
'top': '50px',
'width': '200px',
'height': '80px',
'background-color': '#e74c3c',
'border': '2px solid #c0392b',
'border-radius': '8px',
'text-align': 'center',
'opacity': '0.5',
'z-index': '2'
}
},
{
text: 'Very Transparent\n20% Opacity',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '550px',
'top': '50px',
'width': '200px',
'height': '80px',
'background-color': '#f39c12',
'border': '2px solid #e67e22',
'border-radius': '12px',
'text-align': 'center',
'opacity': '0.2',
'z-index': '3'
}
},
{
text: 'Almost Invisible\n10% Opacity',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '50px',
'top': '200px',
'width': '200px',
'height': '80px',
'background-color': '#9b59b6',
'border': '2px solid #8e44ad',
'border-radius': '6px',
'text-align': 'center',
'opacity': '0.1',
'z-index': '4'
}
},
{
text: 'Layered\nOpacity\nEffect',
css: {
'font-size': '18px',
'color': '#ffffff',
'left': '300px',
'top': '200px',
'width': '200px',
'height': '80px',
'background-color': '#27ae60',
'border': '2px solid #229954',
'border-radius': '15px',
'text-align': 'center',
'opacity': '0.7',
'z-index': '5'
}
}
],
images: []
},
images: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [],
images: [
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzM0OTVkYiIvPgogIDx0ZXh0IHg9IjEwMCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkltYWdlPC90ZXh0Pgo8L3N2Zz4K',
css: {
'width': '200px',
'height': '100px',
'left': '50px',
'top': '50px',
'border': '3px solid #e74c3c',
'border-radius': '15px',
'z-index': '1'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTUwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzI3YWU2MCIvPgogIDx0ZXh0IHg9Ijc1IiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE2IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '150px',
'height': '100px',
'left': '300px',
'top': '50px',
'border': '2px dashed #f39c12',
'border-radius': '20px',
'z-index': '2'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTgwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzlhNTliNiIvPgogIDx0ZXh0IHg9IjkwIiB5PSI2NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE4IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '180px',
'height': '120px',
'left': '500px',
'top': '50px',
'border': '2px dotted #8e44ad',
'border-radius': '25px',
'z-index': '3'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iOTAiIGZpbGw9IiNmMzkxMiIvPgogIDx0ZXh0IHg9IjgwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE2IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '160px',
'height': '90px',
'left': '50px',
'top': '200px',
'border': '4px double #e67e22',
'border-radius': '10px',
'z-index': '4'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQwIiBoZWlnaHQ9IjgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHdpZHRoPSIxNDAiIGhlaWdodD0iODAiIGZpbGw9IiM4ZTQ0YWQiLz4KICA8dGV4dCB4PSI3MCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkltYWdlPC90ZXh0Pgo8L3N2Zz4K',
css: {
'width': '140px',
'height': '80px',
'left': '250px',
'top': '200px',
'border': '2px solid #663399',
'border-radius': '30px',
'z-index': '5'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzM0NDk1ZSIvPgogIDx0ZXh0IHg9IjYwIiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '120px',
'height': '100px',
'left': '450px',
'top': '200px',
'border': '3px solid #2c3e50',
'border-radius': '5px',
'z-index': '6'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iI2VjZjBmMSIvPgogIDx0ZXh0IHg9IjUwIiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMmM0ZTUwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5DaXJjbGU8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '100px',
'height': '100px',
'left': '650px',
'top': '200px',
'border': '2px solid #bdc3c7',
'border-radius': '50px',
'z-index': '7'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMwIiBoZWlnaHQ9IjgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwb2x5Z29uIHBvaW50cz0iNjUsMTAgMTIwLDQwIDEyMCw4MCA2NSw1MCAxMCw4MCAxMCw0MCIgZmlsbD0iI2YzOWMxMiIvPgogIDx0ZXh0IHg9IjY1IiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U3RhcjwvdGV4dD4KPC9zdmc+Cg==',
css: {
'width': '130px',
'height': '80px',
'left': '50px',
'top': '350px',
'border': '2px solid #e67e22',
'border-radius': '8px',
'z-index': '8'
}
}
]
},
'mixed-media': {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Text Over Image',
css: {
'font-size': '24px',
'color': '#ffffff',
'left': '100px',
'top': '80px',
'background-color': 'rgba(0,0,0,0.7)',
'border-radius': '5px',
'padding': '5px',
'z-index': '3'
}
},
{
text: 'Side by Side\nWith Image',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '300px',
'top': '50px',
'background-color': '#e8f4f8',
'border': '2px solid #3498db',
'border-radius': '10px',
'z-index': '2'
}
},
{
text: 'Behind Image',
css: {
'font-size': '20px',
'color': '#e74c3c',
'left': '500px',
'top': '200px',
'z-index': '1'
}
},
{
text: 'Mixed Content\nExample',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '50px',
'top': '300px',
'width': '200px',
'height': '80px',
'background-color': '#8e44ad',
'border': '2px solid #663399',
'border-radius': '12px',
'text-align': 'center',
'z-index': '4'
}
}
],
images: [
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzM0OTVkYiIvPgogIDx0ZXh0IHg9IjEwMCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyMCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkltYWdlPC90ZXh0Pgo8L3N2Zz4K',
css: {
'width': '200px',
'height': '100px',
'left': '50px',
'top': '50px',
'border': '3px solid #e74c3c',
'border-radius': '15px',
'z-index': '1'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTUwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iIzI3YWU2MCIvPgogIDx0ZXh0IHg9Ijc1IiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE2IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '150px',
'height': '100px',
'left': '500px',
'top': '150px',
'border': '2px dashed #f39c12',
'border-radius': '20px',
'z-index': '2'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTgwIiBoZWlnaHQ9IjEyMCIgZmlsbD0iIzlhNTliNiIvPgogIDx0ZXh0IHg9IjkwIiB5PSI2NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE4IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '180px',
'height': '120px',
'left': '750px',
'top': '50px',
'border': '2px dotted #8e44ad',
'border-radius': '25px',
'z-index': '3'
}
},
{
src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHdpZHRoPSIxNjAiIGhlaWdodD0iOTAiIGZpbGw9IiNmMzkxMiIvPgogIDx0ZXh0IHg9IjgwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE2IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2U8L3RleHQ+Cjwvc3ZnPgo=',
css: {
'width': '160px',
'height': '90px',
'left': '300px',
'top': '300px',
'border': '4px double #e67e22',
'border-radius': '10px',
'z-index': '4'
}
}
]
},
fixes: {
canvas: { width: 1200, height: 600, background: '#f8f9fa' },
texts: [
{
text: 'Single Line\nHeight Fixed',
css: {
'font-size': '20px',
'color': '#ffffff',
'left': '50px',
'top': '50px',
'background-color': '#e74c3c',
'border': '2px solid #c0392b',
'border-radius': '8px',
'z-index': '1'
}
},
{
text: 'Center Aligned\nInline Text',
css: {
'font-size': '18px',
'color': '#2c3e50',
'left': '300px',
'top': '50px',
'background-color': '#3498db',
'border': '2px solid #2980b9',
'border-radius': '10px',
'text-align': 'center',
'z-index': '2'
}
},
{
text: 'Right Aligned\nInline Text',
css: {
'font-size': '16px',
'color': '#ffffff',
'left': '550px',
'top': '50px',
'background-color': '#27ae60',
'border': '2px solid #229954',
'border-radius': '12px',
'text-align': 'right',
'z-index': '3'
}
},
{
text: 'Multiline\nHeight Fixed\nExample',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '50px',
'top': '150px',
'background-color': '#f39c12',
'border': '2px solid #e67e22',
'border-radius': '8px',
'z-index': '4'
}
},
{
text: 'Center Multiline\nHeight Fixed\nExample',
css: {
'font-size': '18px',
'color': '#ffffff',
'left': '300px',
'top': '150px',
'background-color': '#8e44ad',
'border': '2px solid #663399',
'border-radius': '15px',
'text-align': 'center',
'z-index': '5'
}
},
{
text: 'Right Multiline\nHeight Fixed\nExample',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '550px',
'top': '150px',
'background-color': '#ecf0f1',
'border': '2px solid #bdc3c7',
'border-radius': '10px',
'text-align': 'right',
'z-index': '6'
}
},
{
text: 'Very Long Text That Should Wrap Properly With Fixed Height',
css: {
'font-size': '14px',
'color': '#ffffff',
'left': '50px',
'top': '300px',
'width': '300px',
'height': '100px',
'background-color': '#34495e',
'border': '2px solid #2c3e50',
'border-radius': '8px',
'text-align': 'center',
'z-index': '7'
}
},
{
text: 'Block Text\nWith Fixed Height\nAnd Center Alignment',
css: {
'font-size': '16px',
'color': '#2c3e50',
'left': '400px',
'top': '300px',
'width': '200px',
'height': '100px',
'background-color': '#fef9e7',
'border': '2px dashed #f39c12',
'border-radius': '12px',
'text-align': 'center',
'z-index': '8'
}
}
],
images: []
},
custom: {
canvas: { width: 1200, height: 600, background: '#f0f8ff' },
texts: [
{
text: 'Custom\nConfiguration\nExample',
css: {
'font-size': '20px',
'color': '#2c3e50',
'left': '5