Free Drawing Integration - New Product Feature!! - Productimize

I got the opportunity to work on one of the most exciting feature in our customization engine, empowering end users to draw their designs on the product directly.

Till date, we have provided options to upload their images from the device or from social media accounts. And buyers have options to provide input in text format.

But with this new functionality, merchants can allow their consumers to draw directly or using the stencil on the customization product.

How we came to free drawing feature

So where did the idea for free drawing feature, came from? Before this, we have invested a lot of time in developing features like image upload and text input in a most seamless way. It worked well. Leading UK jewelry brand Abbott Lyon have utilized our text input feature to engrave on their watches and jewelry.

Which helped them to easily upsell extra 10 Euro for engraving option and its huge hit among their customers.

After witnessing their success, we asked ourselves: What can we do to make the user input more personalization.

Importance Of Customer Feedback:

When it comes to the new product feature, we always look into feature request which we received from our existing customers. One of the common requests is free drawing feature.

It makes sense more than ever to provide this feature. We started to explore the technical possibilities.

In our product, we have already used Fabric.js for many of our front-end purpose like changing color, adding image and texture and adding text etc., so naturally, we started to look for brush functionality in it. And we started with the simple pencil of varying thickness in a popup canvas.

Since canvas is simply a 2D bitmap — a paper to paint on — performing free drawing is very natural. And of course, these should be pretty self-explanatory.

This library easily takes away the pain point of having to draw and capture events from a surface that is essentially a bitmap. Similar to kinetic and others. And one more good thing about these modes is they are available for free with a few controls geared directly towards interaction.

I have started experimenting with different styles and techniques — edge smoothing, bezier curve, pen and other patterns.

We have different modes in fabric js ie.

  • pencil
  • circle
  • spray
  • pattern
  • hline
  • vline
  • square
  • diamond

We can use all these modes for free  drawing and we can also vary the line width of these modes.

We can also change the color of the mode using the color picker and this feature makes the user expressive more interactive.

Next Big Step In Personalization:

We believe our free drawing feature will take online personalization to next level. Now the end users don’t have to settle for pre-populated images/icons they can design the product as exactly as they visualized.

Feel free to share your thoughts in the comment section.


Vishnu Priya

Vishnu Priya

Vishnupriya is one of the young Magento Developer in DCKAP. She started her career in Magento and continue building SAAS based products. She is one of the core member in Productimize team in DCKAP. She used to play Table Tennis in her leisure time. She is fond of photography and loves to take selfies.

Leave a Reply