close
T-SHIRT DESIGNER TOOL LABEL DESIGNER TOOL SKIN DESIGNER TOOL LETTERING DESIGNER TOOL SIGN DESIGNER TOOL GREETING CARD TOOL SHOES DESIGNER TOOL BUTTON DESIGNER TOOL
shoes Angle button Angle Tshirt Angle Label Angle Skin Angle Lettering-Angle Sign Angle Greeting Angle
  • Top Arrow First
  • Top Arrow Second
  • Top Arrow Third
  • Top Arrow Fourth
  • Top Arrow Fifth
  • Apron Apron Designer
  • Wallet Wallet Designer
  • Pen-drive Pen-drive Designer
  • Plate Plate Designer
  • Bag Bag Designer
  • Skateboard Skateboard Designer
  • Lighter Lighter Designer
  • Mug Mug Designer
  • Notepad Notepad Designer
  • Napkins Napkins Designer
  • Pants Pants Designer
  • Pen Pen Designer
  • Photo-framPillow Photo-fram Designer
  • Pillow Pillow Designer
  • Purse Purse Designer
  • Bike-seat Bike-seat Designer
  • Bat Bat Designer
  • Trophies Trophies Designer
  • Box Box Designer
  • key-ring Key-ring Designer
  • cap Cap Designer
  • card Crd Designer
  • eyeglasses Eyeglasses Designer
  • hard-cases Hard-cases Designer
  • flask Flask Designer
  • helmet Helmet Designer
  • Hoodies Hoodies Designer
  • table-top Table-top Designer
  • tie Tie Designer
  • tray Tray Designer
  • sticker Sticker Designer
  • Door Door Designer
  • Name Tags Name Tags Designer
  • Price Tags Price Tags Designer
  • Banners Banners Designer
  • Sticker Sticker Designer
  • Bottle Bottle Designer
  • Car Decal Car Decal Designer
  • Stickers Stickers Designer
  • Mobile case Mobile case Designer
  • Sticker Sticker Designer
  • Poster Poster Designer
  • Nail Nail Designer
  • Bat Bat Designer
  • bottle-labals Bottle-labals Designer
  • button Button Designer
  • camera Camera Designer
  • car-decal-(numeral-+-images) car-decal-(numeral-+ -images) Designer
  • cd-print Cd-print Designer
  • ceiling-fan Ceiling-fan Designer
  • electric-board Electric-board Designer
  • Ethernet-board Ethernet-board Designer
  • key-ring Key-ring Designer
  • license-plates License-plates Designer
  • mat Mat Designer
  • mirror Mirror Designer
  • mobile-case Mobile-case Designer
  • mouse-pad Mouse-pad Designer
  • mouth-guard Mouth-guard Designer
  • nail-paint Nail-paint Designer
  • name-plates Name-plates Designer
  • pen-drive Pen-drive Designer
  • pen Pen Designer
  • pendant Pendant Designer
  • photo-fram Photo-fram Designer
  • glass-goggles Glass-goggles Designer
  • game-consoles Game-consoles Designer
  • trays Trays Designer
  • wall-sticker Wall-sticker Designer
  • plates Plates Designer
  • projector Projector Designer
  • Radio Radio Designer
  • rim-cover Rim-cover Designer
  • set-top-box Set-top-box Designer
  • cpu-cabinet Cpu-cabinet Designer
  • Car Decal Car Decal Designer
  • Sticker Sticker Designer
  • Name Plates Name Plates Designer
  • License Plates License Plates Designer
  • Name Tags Name Tags Designer
  • Price Tags Price Tags Designer
  • Boards Designer Boards Designer
  • Bottle Bottle Labels Designer
  • Business Card Designer Business Card Designer
  • Envelopes Envelopes Designer
  • Flags Flags Designer
  • Flyers Flyers Designer
  • Sticker Sticker Designer
  • Lettering Lettering Designer
  • Portraits Portraits Designer
  • Signboards Signboards Designer
  • Wallpaper Wallpaper Designer
  • Wall Stickers Wall Stickers Designer
  • Wrapper Wrapper Designer
  • Greeting Card Greeting Card Designer
  • Envelope Envelope Designer
  • I-Card I-Card Designer
  • Postage Postage Designer
  • Business Business Card Designer
  • Book-inner pages Book-inner pages Designer
  • Brochures Brochures Designer
  • Calendar Calendar Designer
  • Flyers Flyers Designer
  • Notebooks Notebooks Designer
  • book-cover Book-cover Designer
  • notepad Notepad Designer
  • wrapper Wrapper Designer
  • Boots Boots Designer
  • Brogue Brogue Designer
  • Flats Flats Designer
  • flip flops flip flops Designer
  • Galosh Galosh Designer
  • Gardening Clog Gardening Clog Designer
  • Ghillie Ghillie Designer
  • Loafers Loafers Designer
  • Pumps Pumps Designer
  • Sandals Sandals Designer
  • Shoes Shoes Designer
  • Shoes Skimmer Designer
  • Shoes Slingback Designer
  • Shoes Slip-on Designer
  • slipper Slipper Designer
  • Shoes Flat-paper-weights Designer
  • Clock Dial Clock Dial Designer
  • CD Print CD Print Designer
  • Paper Weight Paper Weight Designer
  • Key rings Key rings Designer
  • Magnet Magnet Designer
  • Mirrors Mirrors Designer
  • Plates Plates Designer
  • Tags Tags Designer
  • Trays Trays Designer
  • Buckle Buckle Designer
Click on icons above to know what you can
customize with these designer tools

Our Blogger

Advanced Fabric.js JavaScript Canvas Library: A Revolution by No-refresh

You might be aware of Fabric.js JavaScript Canvas Library that enables you to create and populate objects on the canvas. These objects may encompass simple geometrical shapes, complex shapes, images, etc. It also allows the users to reshape the gradient effect. Grouping of objects, adding the text, etc. are also possible with this tool. But it has a flaw that it cannot adjust an image within the canvas if it is larger than the canvas area.

In our quest to sort out the same, we at No-refresh have devised Handler Class- a Fabric.js JavaScript Canvas Library clone. Our handler tool allows the users to drag and adjust the images within the canvas area in a hassle-free manner. The users don’t need to install any software to run this tool. We always lay emphasis on taking the experience of our users to an utmost level.

Let’s understand Handler Class Tool with a demo

While using Fabric.js, users face a problem that the handler control hides while enlarging the image outside of the canvas. But you can see in the screenshot that our Handler Tool lets the users adjust the images with handler control even if they are outside of the canvas. So, here this issue is solved completely.

JavaScript Canvas Library

Library used in Handler Control Tool:

1-test_jquery.js (JavaScript library)
2-fabric.js (Canvas Handler Library)
3-toolevent.js (add object and manage handler library)
4-scalehandler.js (Sparx custom handler library)

How to use?

1- The first step is to download CustomHandler.zip file.
2- Then you will have to move it on any server exm->(http://norefresh.thesparxitsolutions.com/jstoolrnd/CustomHandler/)
3- Images can be added to the canvas simply by using ‘add Image’ button
4- Check toolevent.js, where we add objects, to add objects

Conclusion

The functioning of Handler Class is no dissimilar to Fabric.js JavaScript Canvas Library; that’s why we can address it as Fabric.js JavaScript Canvas Library clone. But, as it is the more polished version of Fabric.js; hence, referring it as advanced Fabric.js JavaScript Canvas Library would also be fair. Apart from the advanced functioning, it carries some of the features of fabric.js, such as:

  • Touch device support
  • Subclassing

So, now it’s clear that our Fabric.js JavaScript Canvas Library clone is going to make your experience way better in terms of functionality and features.

Comments

Leave a Reply

 

Categories

Tags

Archives

Recent Posts

discount no-refresh view more