Create a fresh trail underneath the overlay image

When utilizing fabric.js to draw a new path with isDrawingMode: true enabled (seen on the right side of the screenshot), I am encountering an issue where the path appears above my overlay image, which is a transparent png.

https://i.stack.imgur.com/R3fGn.png

        var canvas = this.__canvas = new fabric.Canvas('c', {
            isDrawingMode: true,
            preserveObjectStacking: true
        });


        var img = fabric.Image.fromURL(imgUrl, function(oImg) {
            oImg.scaleToWidth(canvas.getWidth());
            oImg.id="OverlayImage";
            canvas.setOverlayImage(oImg, canvas.renderAll.bind(canvas));
        });

The issue only arises once I finish drawing the path.

I have attempted using multiply filter and adjusting stacking order during mouse move events, but have not had any success.

If you have any ideas on how to resolve this, please share!

https://codepen.io/localhorst/pen/zYvKWqo

javascripthtml5-canvasfabricjs

Answer №1

If you want a 100% fabric solution, avoid using the fabric brush/freeDrawingMod tool. Instead, you can create your own drawing path and add it to the canvas as a fabric object by tracking mouse clicks and movements, updating the fabric path object each time the mouse moves. For more information on creating a path object, check out this helpful explanation at the end of this page:

A simpler solution would be to position the image as an HTML element on top of the canvas. By disabling pointer-events on the image, you can click through it and draw on the fabric canvas.

Here's an example from your CodePen:

<div class="row">
    <img class="overlay" src="https://sandmoshi.github.io/eColorBook/pages/fox-trans.png"/>
    <div class="col-8">
            <canvas id="c" height="600" width="800" style="border:1px solid #aaa;"></canvas>
        </div>
...

.overlay{
  position:absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

I have created a fork of your pen to demonstrate this: https://codepen.io/TheNils/pen/QWjdEOR

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

Tips on harnessing the power of AngularJS $scope

In need of assistance! I have a paragraph and a counter that I want to update whenever the user clicks on the paragraph, all using AngularJS. Below is the code snippet I've come up with: <!DOCTYPE html> <html> <head> <script src= ...

javascriptjqueryangularjs

The HTML was generated without any styling properties assigned

After running my script on a galaxy tab, I encountered a strange issue. I created an HTML element (div) and attempted to access the style attribute, only to receive an error message indicating that style is null. Below is the code snippet: var newDiv = d ...

javascriptandroidhtml

Populating dropdown menu with data from redux state upon component mounting

I am new to working with react-redux and have successfully implemented dependent dropdown functionality in a react component (Country => State => City). My goal now is to dynamically update the dropdown values based on data received from the redux s ...

javascriptreactjsreduxreact-redux

Intermediary Server Facilitating Video Negotiation in WebRTC Piping

In the process of developing a 3-part system for enabling remote vehicles to connect to a base station via WebRTC, my goal is to transmit video from the remote vehicle to a remote station using an RTC Peer Connection. The architecture of this system can be ...

javascriptnode.jswebrtcp2pmediastream

Can the Disqus API be leveraged to retrieve comments from a particular website address?

It is my preference to accomplish this task solely with client-side JavaScript scripting, if feasible. ...

javascriptjsoncross-domaindisqus

The output stored in the variable is not appearing as expected

https://i.sstatic.net/VWCnC.pnghttps://i.sstatic.net/UoerX.pnghttps://i.sstatic.net/n52Oy.png When retrieving an API response and saving it in the "clima" variable, it appears as undefined. However, when using console log, the response.data is visible ...

javascriptreactjsapiweather-api

Problem with Jquery Sticky Navigation

I've been struggling to understand this issue and can't seem to find any help. http://fiddle.jshell.net/DQgkE/7/show/ The user experience is currently a bit glitchy, but what I would like is: 1) When scrolling down the page, I want the Sticky ...

javascriptjquerycssajaxjquery-plugins

Having trouble connecting the HTML file with the JavaScript file

This is my unique HTML file <!DOCTYPE html> <html> <head> <script src="ll.js"></script> </head> <body> <link rel="stylesheet" href="home.css"> ...

javascripthtmlcssstatic-linking

What is the best way to delete a container when its child element includes a specific string?

I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement con ...

javascriptjqueryhtmlcss

Having trouble with your HTML iFrame not functioning properly?

My code is not working as expected and I'm puzzled by it. It was working fine yesterday but now it's giving me trouble. <iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.google.co ...

javascripthtmliframe

Creating a custom loading page in Next.js 13: A step-by-step guide

Hello, I am currently working on implementing a loading page for my website to enhance the user experience during a longer loading time. I have created a simple functional component that displays a loading message and imported it into my layout.jsx file in ...

javascriptreactjsnext.jsstateloading

To handle a 400 error in the server side of a NextJS application, we can detect when it

I'm facing a situation where I have set up a server-side route /auth/refresh to handle token refreshing. The process involves sending a Post request from the NextJS client side with the current token, which is then searched for on the server. If the t ...

javascripttypescripterror-handlingnext.js

Avoiding an endless spiral on a setter in JavaScript/TypeScript

Implementing TypeScript, I've been working on setting up a concept called a "trigger" : an object that includes both a checker function (which returns a Boolean) and a behavior function capable of performing various tasks. My aim is to execute the che ...

javascripttypescriptinfinite-loopsetter

Updating a nested subarray using Node.js with the MongoDB API

I am currently in the process of developing a backend API using Node.js/Express and MongoDB for managing student records. I am facing difficulty with updating a sub-field within the data structure. Below is the code snippet from my Student.js file located ...

javascriptnode.jsmongodbexpressmongoose

Manipulating the DOM to show various elements upon clicking on text

Currently, I am engaged in a small project that involves experimenting with DOM manipulation. The project revolves around creating a Todo list where users can generate various categories (such as work, gym, finances, etc.) and then add corresponding subtas ...

javascripthtmlcssnpmdom

How can I detect a click event on an SVG element using JavaScript or jQuery?

Currently, I am developing a web application that utilizes SVG. However, I have encountered an issue: I am struggling to add a click event to each element within the SVG using jQuery. The problem arises when attempting to trigger the event; it seems like t ...

javascriptjqueryhtmlsvg

Shared variables in Node.js allow for multiple users to access different entry points simultaneously

In the process of transitioning my node-js application from a single-tenant database to a multi-tenant database, I am facing some challenges. The application code is accessed through an express api and various services are run through different entrypoints ...

javascriptnode.jspostgresqlexpressnode-postgres

`Using Twitter Bootstrap in mobile app development with javascript`

I have been utilizing Twitter Bootstrap 2.3 on one of my websites and I appreciate its responsiveness and use of media queries for mobile devices. However, I have noticed a lack of mobile-specific features, particularly linked listviews. In order to addres ...

javascriptjqueryjquery-mobiletwitter-bootstrapiui

What is the best way to display the contents of an array that contains another array within it?

I need help looping through this array and displaying the "roleName" value. I want to use the map method to iterate over it. { "userMenuDTO": { "menuId": "13", "menuName":"PruebaMenu900 ...

javascriptarraysreactjsobjectdatatable

Incorporate create-react-app with Express

Issue - I am encountering a problem where I do not receive any response from Postman when trying to access localhost:9000. Instead of getting the expected user JSON data back, I am seeing the following output: <body> <noscript>You need to ...

javascriptnode.jsreactjsexpress