Create A Canvas With Background Image, Dynamically Update The Text, Then Save The Canvas?

I'm trying to create a canvas with a background image and text, update the text content via user input on button click, then convert that updated canvas to an image in order to sav

Solution 1:

From a previous answer

A tainted canvas occurs when images are loaded onto a canvas from a different domain than a current one. After that the canvas cannot be saved to a data URL.

Solutions:

Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).

Post your images to a site that supports cross-domain sharing (like dropbox.com). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (var img=new Image(); img.crossOrigin="anonymous" ...)

Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).