How And Why I Built HTML5 Infographics Design Editor | Codementor

Trang chủ » Html5 Graphics Editor » How And Why I Built HTML5 Infographics Design Editor | Codementor

Có thể bạn quan tâm

Codementor EventsFrederic AnandFollowFrontend Application DeveloperHow and why I built HTML5 Infographics design editor Published Mar 27, 2020Last updated Jul 17, 2020How 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.

HTML/CSSFabric.jsJavaScriptReport

Enjoy this post? Give Frederic Anand a like if it's helpful.

post commentsFrederic AnandFrontend Application DeveloperI have Experience with MVC Frameworks (ie. Symfony, Laravel framework) - Knowledge with TypeScript, React / Angular / Vue Js, AWS, Node, Blockchain. - Proficient with either MySQL or other relational database technologies. - Knowl...FollowDiscover and read more posts from Frederic Anandget startedEnjoy this post?

Leave a like and comment for Frederic

post comments

Từ khóa » Html5 Graphics Editor