Preserving the background image on an html canvas along with the drawing on the canvas

Can users save both their drawings and the background image after completing them?

 var canvas = document.getElementById("canvas"); // This element is from the HTML
 var context = canvas.getContext("2d"); // Retrieve the canvas context

 canvas.style.backgroundImage = `url(${value.result.questionImage})`; // The image is fetched from a SQL database

 // Users can then create drawings on the canvas...

Answer №1

It is recommended to draw the background image directly on the canvas instead of relying on the style attribute:


var canv = document.getElementById("canv"); // obtained from HTML
var context = canv.getContext("2d"); // obtain canvas context

var img = document.createElement('img'); 
img.onload = ()=>context.drawImage(img, 0,0); 
img.src=value.result.questionImgUrl;

By incorporating the question image as part of the canvas, it ensures that the data url includes the image when fetched.

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

Automatically calculate the sum of numbers as the user inputs values dynamically, regardless of the number of inputs. Notify the user if they enter anything other than numbers

HTML Table with Dynamically Adding Rows <table> <thead> <th>Item</th> <th>Cost</th> </thead> <tbody id="items-list"> <tr> <td>Item 1</td> ...

Step-by-step guide on setting up a click counter that securely stores data in a text file, even after the

Can anyone help me make this link actually function as intended? Right now it only runs the JavaScript code, but I would like it to run the code and redirect to a webpage. Additionally, I need the data to be saved to a text file. Please provide assistanc ...

Error encountered while running a mounted hook in Vue.js that was not properly handled

I have created a To Do List app where users can add tasks using a button. Each new task is added to the list with a checkbox and delete button next to it. I want to save all the values and checked information on the page (store it) whenever the page is ref ...

What is the process for sending a token using Passport-VKontakte for social authentication?

I have integrated VK auth in my app, but in order to identify the site visitor, I need to send them a token when they click on auth vk. How can I send this token to the user using passport-vkontakte? app.get('/auth/vk', passport.authenticate(& ...

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

Data not being properly set in the form

Check out this chunk of HTML code: <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script> function getCords(){ ...

The nodejs events function is being triggered repeatedly

I have been developing a CMS on nodejs which can be found at this link. I have incorporated some event hooks, such as: mpObj.emit('MP:FOOTER', '<center>MPTEST Plugin loaded successfully.</center>'); Whenever I handle this ...

The necessary parameters are not provided for [Route: sender] with the [URI: {name}/{code}]. The missing parameters are name and code

I have encountered a problem while using AJAX and I am struggling to find a solution. Routes: web.php Route::get('/{name}/{code}', 'TestController@counter'); Route::post('/{name}/{code}', 'TestController@sender')-&g ...

Activate dual AJAX JSON and cycle through multiple alerts each time an "ul li" element is clicked

In my code, I am utilizing two ajax requests. One retrieves a chat userlist column in JSON format, while the other fetches the message history for each user. The functionality works such that when a $('.member_list ul li') element is clicked, th ...

NodeJS MySQL failing to retrieve the most updated data post-write

I'm struggling to solve an issue where after performing data operations (create, update, delete) and then querying for the data afterwards, I receive the previous version of the data rather than the updated version. For example: Let's say I hav ...

Is it possible to deactivate dynamic binding in Vue.js?

I'm curious if there's a way to disable dynamic binding for a specific instance of an attribute that I'm displaying. Imagine I have the following code, utilizing two-way binding: this.$children[0].$data.hits In this scenario, I have a vac ...

Alert: The flattening operation is not a recognized function. Proceed with --force option to proceed

I've encountered a strange error with Grunt. After some time in our CI system, the task grunt assemble:site starts to fail and outputs the following warning: Running "assemble:site" (assemble) task Warning: flatten is not a function Use --force to co ...

What is the reason for using a wrapper with fs.readFile when a callback is included as an argument?

Recently delving into Node.js, I encountered a perplexing scenario while using fs.readFile(). Initially, my attempt to read a file led me to use: fs.readFile("file.txt",function(err,data) { if(err) {throw err;} console.log(data); }); However, to ...

How can I show the total sum of input values in a React.js input box?

Is there a way to dynamically display the sum of values entered in front of my label that updates automatically? For example, you can refer to the image linked below for the desired output Output Image I have initialized the state but I'm struggling ...

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

What steps can I take to direct mobile visitors to the mobile-friendly version of my website?

Looking for a way to automatically redirect users on mobile devices from www.domain.com to the new mobile version at m.domain.com? ...

Having trouble decoding invalid JSON received from the Twilio API

For the past 4 hours, I've been struggling to parse a basic JSON from Twilio. The process is as follows: A text message containing a magnet link is sent Twilio forwards the request to my serverless function in the cloud I attempt to parse the reques ...

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

I have a table that is refreshed every 5 minutes using ajax.reload(). One of the rows in this table is labeled as CIP. My goal is to highlight the CIP row on each refresh where the value remains unchanged from the previous value (value received in the la ...

Having trouble with the error "Cannot GET /" in your Angular2 and Express

I've been working on customizing this GitHub example application to utilize Express instead of KOA. When I enter gulp serve in the CentOS 7 terminal, the app launches successfully. However, upon typing http : // localhost : 8080 in the browser, a 404 ...

The functionality of Material Autocomplete is not compatible with InputProps

I am experiencing an issue with customizing the border of my TextField within my Autocomplete component. When I include the InputProps prop, the Autocomplete stops rendering Chips <Autocomplete multiple freeSolo options={options} render ...