How to Use Drag And Drop On HTML5 Canvas Element Using FabricJS

By: Sahil Binekar Category: Ruby on Rails, LMS Technologies: Ruby on Rails, HTML5, LMS

Fabric.js is a powerful and simple Javascript HTML5 canvas library.

Reference link: http://fabricjs.com/

git repo. link: https://github.com/sahil-binekar/FabricJs-drag-and-drop
What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas>

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Step 1: Creating Html file

Create a simple HTML boilerplate, we will be using fabricJs including fabricJs CND.

Add some images inside the < body > tag, as we are going to drag and drop these images inside the canvas, write < img > tag as draggable = “true” and add event listener ondragstart = “ dragElement ( event )” (passing the argument event is important as the event is going to handle most of the things).

Create a canvas tag inside a tag, and make the div tag droppable by adding event listeners ondragover and on drop along with listeners.

Step 2: Writing javascript for drag and drop.

First, let’s initialize the fabric canvas on the window unload event.

Then on “ ondragstart” event calling the function dragElement(e).

With “ e.dataTransfer.setData(“id”, e.target.id) “ we are passing the drag target id to the drop function.

With allowDrop(e) function which is called on the “ ondragover “ event allows the canvas to be droppable.

The data i.e. “id” that we have passed from the “ dragElement(e)” method is received in the “ dropElement(e)” method using getData.

With help of the “ data “ variable instantiating the target image with imag variable.

Then creating the instance of fabric image ‘ img’ passing the target image i.e. imag, setting the left and top position with the help of event ‘ e’, with mouse dropped coordinates e.layerX and e.layerY.

To position, the element exactly at the mouse coordinates, reducing the coordinates with 80 from the left and 40 from the top, and to scale the image exactly as the image height and width ratio using scaleToWidth() and scaleToHeight() properties.

And finally adding the image to the canvas.

And some CSS for styling the canvas. Add this CSS in style.css and include it on your index page.

Demo link: https://fabric-drag-and-drop.herokuapp.com/

jsfiddle link: https://jsfiddle.net/Sahil999/rtbmy6hw/14/

Conclusion: FabricJs library does not provide drag and drops functionality by default, so fiddling with it to make it behave as we want. I hope this was helpful.

Thank you

Originally published at https://www.cryptextechnologies.com.

--

--

--

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting Started with Redux

Benefits of Node.js

10 Must-Know JavaScript Tricks & Tips to Make You a Better Programmer

Publishing React Component to NPM

[JavaScript] 繼承與原型鏈

An Overview of the React Ecosystem

BottomBar and TopBar with Jetpack compose

JavaScript Article 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cryptex Technologies

Cryptex Technologies

Cryptex specializes in developing open source web applications and software solutions across all domains and verticals using Ruby on Rails (ROR) technology

More from Medium

How to make a to-do web app

My Phase 3 Project!

Writing, Accessing, and Modifying Nested APIs with Ruby & Sinatra

How to Build Hit Boxes In JavaScript for Game Development