What is the best way to ensure an image stays behind another image when it is being

Edit: Here I've successfully kept it in the background while selected, however, it seems to have become unmovable. What could be causing this issue?

I have the capability to upload an image from my computer and then move it around. The issue: When I select the image, it comes forward until deselected. Is there a way to ensure it stays BEHIND the uploaded image? Please refer to this JSFiddle for reference. It's evident that when you upload an image, it moves above the frame—I wish for it to stay behind while still being able to see the controls.

Thank you in advance!

...... (code continues)
javascriptjqueryhtmlcssfabricjs

Answer №1

Before diving into fabricjs, it is essential to go through some preliminary reading in the documentation.

1) When working with fabricjs, keep in mind that the selected object may jump to the top, but you have the option to disable this by setting preserveObjectStacking: true on the canvas.

2) To ensure an image remains consistently on top without being affected by selection, use 

canvas.overlayImage = fabric.Image
. This feature allows you to overlay an image that functions as a mask for other objects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using PHP to detect changes in input fields upon page load with jQuery

I have a jQuery snippet on my page: $( document ).ready(function() { $("#URL").on("input load", function(e) { console.log(e.type) .... }); }); Further down the page, I also have... <input id="URL" type="text" value="<?=$_GE ...

javascriptphpjquery

What is the proper way to send properties to a component that is enclosed within a Higher Order Component?

I have a situation where I need to pass props from the index page to a component wrapped inside two higher-order components. Despite fetching the data successfully in getStaticProps, when passing the props to the About component and console logging them in ...

javascriptreactjsnext.jsreact-hoc

Bootstrap: enabling the opening of a modal without triggering the collapse feature on the parent element

Here's a simple scenario: I have a Bootstrap 4 table with rows that I would like to be clickable to expand additional hidden rows. The entire tr has data-toggle="collapse". However, within that TR, there are some buttons that I want to open ...

javascriptjquerybootstrap-4bootstrap-modal

Can a feature be added based on whether or not the user has installed a specific package (optionalFeature)?

I'm developing a module and I am looking to implement a feature where if a user has installed react-intl in their project, an advanced component with translation capabilities will be exported. This approach would eliminate the need for me to maintain ...

javascriptnode.jsreactjsnpmecmascript-6

The equivalent to using $("div").toggle() in jQuery in plain JavaScript would be something like togg

I'm currently utilizing jQuery and am interested in converting certain methods to native JavaScript. When using jQuery, the code looks something like this: $("div").toggle() Is there a way to convert this to native JavaScript, perhaps like below? ...

javascriptjquery

What makes React Router distinct as a React component?

What is the reasoning behind react-router being a React Component that utilizes React internally? As routing issues were already addressed before the introduction of React Components? In the case where the path property does not align with the URL path, w ...

javascriptreactjsreact-router

Exploring the incorporation of various local fonts in NextJs version 13

Having trouble adding multiple local fonts to nextjs 13. According to the instructions in the documentation, you should follow these steps for a single file. I attempted to import two files like this: import '@/styles/globals.css'; import localF ...

javascriptreactjsnext.jsfontsnext.js13

When Ajax sends an HTTP Get request to an MVC Controller with a complex JSON object as a parameter, the controller receives it as null

I am currently working with three classes: public class MainSearch { public MainSearch() { SearchData searchData = new SearchData(); SearchMode searchMode = new SearchMode(); } public SearchData searchData { get; set; } ...

javascriptjqueryjsonajaxasp.net-mvc-4

Troubleshooting IE Issues with HTML5 Video Background

When creating a webpage with a video background, I include the following code: position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background: url(images/bg/home.jpg) no-repeat; background-size: cover; This code works well on ...

jquerycsshtmlvideo

What is the process for generating a collection of objects in a Mongoose Model?

I am currently working on creating a structure similar to this: var User = mongoose.model('Clicker', totalClicks: [ {type: Number, default: 0}, {type: Number, default: 0} ], I have explored various documentation resources related to ...

javascriptarraysnode.jsmongodbmongoose

Locate the position of an item in JavaScript based on its value

My json contains a lengthy list of timezones like the examples below. [ {"value": "Pacific/Niue", "name": "(GMT-11:00) Niue"}, {"value": "Pacific/Pago_Pago", "name": "(GMT-11:00) Pago Pago"}, {"value": "Pacific/Honolulu", "name": "(GMT-10:00) Hawaii T ...

javascriptjson

The number of subscribers grows every time $rootscope.$on is used

I currently have an Angular controller that is quite simple: angular.controller('appCtrl', function ($scope, $rootScope) { $rootscope.$on('channel.message', function () { // do something here } }); In addition, I have a ...

javascriptangularjs

What is the right way to efficiently rotate a View in React Native?

Here is my code snippet: <View style={{borderColor:"red",borderWidth:4,flex:1,transform: [{ rotate:'90deg' }]}}> <Text>Hi</Text> </View> The result can be seen here: https://i.sstatic.net/C9ryl.jpg Unf ...

cssreact-nativejsx

Guide on implementing CSS3 parser with HtmlUnitDriver

As an example, let's consider a scenario where we have a selector to target the active menu item: $("ul#menu li a[href='/']") And a selector to target the remaining menu items (1): $("ul#menu li a:not([href='/'])") However, the ...

cssseleniumjquery-selectorswebdriverhtmlunit

Angular.js unable to locate image 404 Error occurs

I am facing a small issue. I want to display icons from categories that I receive from my REST API. To achieve this, I am using AngularJS with REST API which provides me with the designed icons. However, I encountered an error in Firebug: "NetworkError: 4 ...

javascriptangularjs

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

Enhance your AJAX calls with jQuery by confidently specifying the data type of successful responses using TypeScript

In our development process, we implement TypeScript for type hinting in our JavaScript code. Type hinting is utilized for Ajax calls as well to define the response data format within the success callback. This exemplifies how it could be structured: inter ...

javascriptajaxtypescriptpromisetype-hinting

What is the best way to programmatically close a bootstrap modal?

Currently, I am performing update operations through a modal. When the modal pops up, it loads specific row data that I intend to update. Here is the code for my modal: <form id="form1" runat="server"> <asp:ScriptManager ID="sm1" runat="serve ...

javascriptc#jqueryasp.nettwitter-bootstrap

What is the rationale behind permitting kebab-case for non-standard attributes but not for others? Additionally, how can one specify types like this in TypeScript?

When using foo as an attribute, it results in an error: // App.tsx // ...

javascriptreactjstypescriptvue.jsjsx

"When the focus is on, the DateTimePicker component in react widgets will automatically

Embarking on my journey with React, I have a reusable DateTime component defined as follows: interface IProps extends FieldRenderProps<Date, HTMLElement>, FormFieldProps {} const DateInput: React.FC<IProps> = ({ input, width, plac ...

javascriptreactjs