How and why I built HTML5 Infographics design editor

About me

I am freelancer developing HTML5 Canvas based web applications

The problem I wanted to solve

Creating Infographics design editor using HTML5 Canvas with features

Open pre-made templates
Save your own templates
Create any size artwork
Customize Graphics Factory images
Upload your own images
Save & Open Premade Templates
Ungroup and Edit Vector SVG images
Add Photos
Add Text & Curved Text
Save artwork as PNG, JPG, SVG or Print it

Infographics editor Demo
https://www.graphicsfactory.com/editor/#/designer/template/47

What is HTML5 Infographics design editor ?

Infographics design editor is a browser based web application to create / edit / save infographics desings.

Tech stack

HTML5 Canvas, fabric js, React js, Strapi headless cms.

The process of building HTML5 Infographics design editor

Images / SVG elements / shapes / background images are setup in strapi CMS and accessed in fronend editor using REST APIs

Challenges I faced

Saving and Editing Curved Text is out of the box solution added in this editor.

Key learnings

Editor can be used for different purposes like creating product flyers, magazines (with multiple design pages)

https://www.graphicsfactory.com/editor/#/designer/template/47

Final thoughts and next steps

Editor is allowed to design only single page currently, but it can be changed to add / edit multiple pages.