Disappearance of background image on HTML5 canvas upon mouse movement

I am looking to incorporate the ability for users to draw sketches on an image displayed on a canvas. Currently, I am utilizing the sketch.js jQuery library and have encountered the following issues:

  1. The image loads successfully onto the canvas.
  2. However, when the mouse hovers over the canvas, the image disappears.
  3. Dragging the mouse results in sketch marks appearing on the empty canvas instead of over the image as intended.

In conclusion, it seems that sketch.js is clearing the canvas but I am unsure how to resolve this issue. Any assistance would be greatly appreciated!

canvas.html

<canvas id="tools_sketch" width="300" height="300" style="background: no-repeat center center;border:black 1px solid"></canvas>

Here is my script

<script type="text/javascript>
    var sigCanvas = document.getElementById('tools_sketch');
    var context = sigCanvas.getContext('2d'); 
    var imageObj = new Image();
    imageObj.src = 'human-face.jpg';
    imageObj.onload = function() {
       context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.width);
    };

    $(function() {
       $('#tools_sketch').sketch({defaultColor: "#FF0000"});
    });

</script>

Answer №1

To avoid saving the image repeatedly, you can set it as a background for the canvas instead of drawing it each time.

style="background: url(your-image-here) no-repeat center center;"

<canvas id="tools_sketch" width="300" height="300" style="background: url(your-image-here) no-repeat center center;"></canvas>

UPDATE

A bug has been identified in sketch.js. You will need to delete this line from the source code:

this.el.width = this.canvas.width()

This is because of how the canvas element functions. Whenever it is resized, the canvas is cleared and sketch.js must redraw after resizing. However, the library is not aware of your image and may cause issues.

Answer №2

this.canvas.width() = this.el.width

It's best to delete the line mentioned in your sketch.js

I find it puzzling why updates are not being made to this sketch.js file, despite identifying bugs and solutions.

Answer №3

After some experimentation, I discovered that removing the "width =" line solved the issue. However, when using rgba(0, 0, 255, 0.5) to draw, it actually ends up drawing with rgba(0, 0, 255, 1).

The reason for this unexpected behavior is that during each mouse movement, the canvas gets reset and redrawn every time. As a result, each previous point is drawn again. When the aforementioned line is removed, the same pixel is drawn multiple times, ultimately eliminating transparency (as transparent values add up to 1).

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

I'm trying to understand a JSON object that has multiple key names pointing to a single value. How can I properly interpret this in

Encountering an object with a strange key. const obj = { formValues: { 'TOTAL;_null_;_null_;3;_null_': "100" 'billing;_null_;_null_;1;_null_': "Y" 'billing;_null_;_null_;2;_null_': "Y" 'billi ...

When the Protractor configuration is executed, it displays the message "The requested webpage cannot be accessed."

Testing protractor on a vanilla.js app and encountering an error when running protractor basicConf.js The following error is occurring: This webpage is not available ERR_CONNECTION_REFUSED Here is the test script in use: describe('foo', fun ...

Exploring Angular 2 Routing across multiple components

I am facing a situation where I have an app component with defined routes and a <router-outlet></router-outlet> set. Additionally, I also have a menu component where I want to set the [routerLink] using the same routes as the app component. How ...

Is it possible to input rendered HTML into a vue property?

I am currently utilizing vue-material and running into the following situation: <md-dialog-confirm :md-active="true" md-title="Make an Outbound Call" md-confirm-text="Agree" md-cancel-text="Disagree" md-content="some <p>HTML ...

What is preventing the value from changing in auth.guard?

I am encountering an issue with the variable loggined, which I modify using the logTog() method. When I call this method, a request is made to a service where the current result is passed to auth.guard. However, in the console, it displays "undefined". Can ...

The series in angular-chart is not displayed at the top as shown in the documentation

angular-chart.js provides an example of a bar chart, which can be found here. Using this as a foundation, I made some modifications to the js and markup code like so. HTML <body ng-app="app"> <div class="row"> <div class="col-m ...

Tips for relocating a div panel below all other div panels when a button is clicked with JQuery and CSS

There are several panels stacked below each other. Each panel has a button that, when clicked by the user, should move the panel to the bottom of the stack. For example: If there are 10 panels aligned sequentially and the user wants to remove Panel 2 by ...

The styles in the published npm package are not being applied

Currently in the process of developing a custom npm package named react-clear-carousel, which is essentially a React component with enhanced styles using SCSS. Although I have implemented class names, the styles are not being applied when testing it out. ...

Preventing Bootstrap Modals from closing or refreshing on page reload

My code contains multiple buttons that trigger the function showModal(title). showModal(title) { this.modalTitle = title this.$bvModal.show("add-modal") } Below is the specific modal being targeted. <b-modal id="add-modal" ...

Combining NodeJs with Mysql for multiple queries using a chained method

Hey everyone, I'm struggling with running mysql queries repeatedly in my Node.js application. I need to shape the second query based on the results of the first one. The code example I have below is not working as expected. Can anyone provide guidance ...

Utilize a for loop to reference variable names with numbers

Is there a way to extract values from req.body.answerX without manually coding each one using a for loop? I currently have values stored as "answer1, answer2" and so on. This is what I tried: for( var i = 1; i <= 10; i++){ console.log(req. ...

What is the best way to eliminate duplicate values from an Array in ReactJS?

Hi there, I'm new to JavaScript and React. I need some help with a project I found on the React blog. I want to try solving it in my own way. This is the content of todoList.js: const todoList = [ {category: 'Sporting Goods', price: &a ...

Arranging an array of objects in typescript with elements implicitly having an undefined type

Currently, I am facing a challenge where I need to sort an array of objects within a function. The catch is that the function receives the key as a parameter, making it unknown: export interface ProductsList { id: boolean nome: string qtde: number ...

Failure to retrieve fax API data using Twilio's Node.js HTTP requests

Looking to implement fax receiving using Twilio API. This is an excerpt from my index.js file: // const http = require('http'); const express = require('express'); const bodyParser = require('body-parser'); c ...

Duplicating labels with JavaScript

I need assistance with copying HTML to my clipboard. The issue I am encountering is that when I try to copy the button inside the tagHolder, it ends up copying <span style="font-family: Arial; font-size: 13.3333px; text-align: center; background-color: ...

Encountering a 404 error when utilizing ngx-monaco-editor within an Angular application

I have been encountering an issue while attempting to utilize the editor within my Angular 8 application. Despite researching similar errors on Stack Overflow and GitHub discussions, I haven't found a solution yet. Here's how my angular.json asse ...

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...

Creating unique random shapes within a larger shape on a canvas, as shown in the image

I have a parent rectangle and would like to add up to 10 or fewer rectangles on the right-hand side corner of the parent rectangle, as shown in the image below: https://i.sstatic.net/RW9ix.png I attempted to write code to achieve this, but the alignment ...

Interaction between elements in Object3D

I have a collection of objects grouped together in Object3D and I'm attempting to detect when they are clicked on. My scene has dimensions of 600x400, my camera is part of a three-object, and the code for handling events looks like this: function onD ...

Looking for assistance in resolving the error message: 'state' is not defined no-undef

I'm having some trouble adding a navbar to one of my projects as I keep encountering a failed to compile error. "Line 7:5: 'state' is not defined no-undef Line 9:5: 'handleClick' is not defined no-undef" import React, { ...