After searching for placing text over an image in Canvas I found this snippet
jsfiddle.net/m1erickson/pQYz9/ (found it on stackoverflow, I lost the question)
This snippet places any amount of text over an image. Is it possible to show a cross over each textbox? so that I can remove the selected text by pressing it. The closet answer I found is on this post. But this post talks about clearing the whole canvas and redrawing everything except for the item that you want to remove.
how to remove text from canvas in javascript
My end goal is to have have an app where you can upload an image as a background, place some text on it anywhere you want and then save that canvas as an image.
Related
I am displaying the color JPG image of A4 document on canvas.
However, the letters of the image shown in canvas are not clear.
Recently, I saw the content of image resample through javascript.
Please help me with how to make the characters inside the document image clear using the image filter.
Hello guys
I'm making a simple image editor in react native. In which I'm adding multiple text over a image. But as soon as I added one more text over image, the all text comes to an initial position, but I want to place them as where they were before.
Like in PicsArt
where we can add multiple text over image and all the text have their position where they moved or dragged and resized. When the new text is added, previous text have their previous position.
How to do that?
I am developing an online restaurant menu editor. The template is SVG, with a jpeg image of the menu as the background. The user is able to edit the text which is SVG text elements laid on top of the template image.
I am able to create a PDF from this SVG, for the user to see, just fine. Now I want to drop the low resolution background image out of the SVG and place the remaining text into a high resolution print, ready pdf for printing. The problem is the text does not appear in the right place in the print ready file. Nor is it the same size.
I am using the ColdFusion CFPdftag to place the text using the watermark feature. I have tested this and it works fine. It's just the size and coordinates that are off. I know this is because of the resolution but how do I get it to work? There might even be a better way, I don't know.
I figured out that I needed to change the viewport in the svg to the actual size of the hi res pdf instead of leaving it at the low res pixel size I had it at for the web.
Our company's website uses canvas elements to render graphs and charts on our pages. However, these cannot be drag-and-dropped into, say, a Microsoft Word Document or an email client. So I devised a way to replace the canvas with an identical-looking img on mouse down, by getting the base64 data from the canvas.
The canvas is properly replaced by an image on mousedown, and placed back on mouseup. However, this does not allow dragging and dropping the image tag, probably because the replacement happens too late.
Here is a working JSFiddle example.
We use a plugin which also provides tooltips to specific areas of the charts, so I cannot replace the elements on hover in/hover out, as that would stop the tooltips from working.
How do I make dragging and dropping the image itself possible?
Prebuild your img elements at the start of your app instead of taking the time to do it "on-the-fly".
Create your charts using in-memory canvases:
var canvas1=document.createElement('canvas');
// draw your chart on canvas1
Then create img elements from the canvases
var chart1=new Image();
document.body.appendChild(chart1);
chart1.src=canvas1.toDataURL();
your code is working correctly but you can't drop the image onto word because IMO the image is base64, you'll see that if you drag and drop the image onto a new tab in the browser or add a css border or the image id
The Image:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAGQCAYAAAA9TUphAAAgAElEQVR4Xu3dsW5bURBDQfvP/edJHSCFYFnW4WJSJ/a+IRviFvn88IcAAQIECBAgQIAAAQIECBB4u8Dn2y9wAAECBAgQIECAAAECBAgQIPBhoCsBAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQKPD/Svjz+4QgJf/g/7UBpOIUCAAAECBAgQIECAwNMCBvrThG/6AQb6m+D9WgIECBAgQIAAAQIECLxGwEB/jevrf6qB/npjv4EAAQIECBAgQIAAAQK/KGCg/yL2j/4qA/1HOf0wAgQIECBAgAABAgQIvFvAQH93At/9/Qb6d+X8OwIECBAgQIAAAQIECCQFDPRkLA8cZaA/gOSvECBAgAABAgQIECBAYEfAQN/J6t9LDfTV5NxNgAABAgQIECBAgACB/woY6KvFMNBXk3M3AQIECBAgQIAAAQIEDPRTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQICAF/RTHTDQT8XpYwgQIECAAAECBAgQIOAFfbUDBvpqcu4mQIAAAQIECBAgQIDAky/oAAkQIECAAAECBAgQIECAAIGXCTz+gv6yE/xgAgQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBAwEDXAQIECBAgQIAAAQIECBAgEBAw0AMhOIEAAQIECBAgQIAAAQIECBjoOkCAAAECBAgQIECAAAECBAICBnogBCcQIECAAAECBAgQIECAAAEDXQcIECBAgAABAgQIECBAgEBAwEAPhOAEAgQIECBAgAABAgQIECBgoOsAAQIECBAgQIAAAQIECBAICBjogRCcQIAAAQIECBAgQIAAAQIEDHQdIECAAAECBAgQIECAAAECAQEDPRCCEwgQIECAAAECBAgQIECAgIGuAwQIECBAgAABAgQIECBAICBgoAdCcAIBAgQIECBAgAABAgQIEDDQdYAAAQIECBAgQIAAAQIECAQEDPRACE4gQIAAAQIECBAgQIAAAQIGug4QIECAAAECBAgQIECAAIGAgIEeCMEJBAgQIECAAAECBAgQIEDAQNcBAgQIECBAgAABAgQIECAQEDDQAyE4gQABAgQIECBAgAABAgQIGOg6QIAAAQIECBAgQIAAAQIEAgIGeiAEJxAgQIAAAQIECBAgQIAAAQNdBwgQIECAAAECBAgQIECAQEDAQA+E4AQCBAgQIECAAAECBAgQIGCg6wABAgQIECBAgAABAgQIEAgIGOiBEJxAgAABAgQIECBAgAABAgQMdB0gQIAAAQIECBAgQIAAAQIBAQM9EIITCBAgQIAAAQIECBAgQICAga4DBAgQIECAAAECBAgQIEAgIGCgB0JwAgECBAgQIECAAAECBAgQMNB1gAABAgQIECBAgAABAgQIBAQM9EAITiBAgAABAgQIECBAgAABAga6DhAgQIAAAQIECBAgQIAAgYCAgR4IwQkECBAgQIAAAQIECBAgQMBA1wECBAgQIECAAAECBAgQIBAQMNADITiBAAECBAgQIECAAAECBAgY6DpAgAABAgQIECBAgAABAgQCAgZ6IAQnECBAgAABAgQIECBAgAABA10HCBAgQIAAAQIECBAgQIBAQMBAD4TgBAIECBAgQIAAAQIECBAgYKDrAAECBAgQIECAAAECBAgQCAgY6IEQnECAAAECBAgQIECAAAECBAx0HSBAgAABAgQIECBAgAABAgEBAz0QghMIECBAgAABAgQIECBAgICBrgMECBAgQIAAAQIECBAgQCAgYKAHQnACAQIECBAgQIAAAQIECCtJVbsAAABWSURBVBAw0HWAAAECBAgQIECAAAECBAgEBAz0QAhOIECAAAECBAgQIECAAAECBroOECBAgAABAgQIECBAgACBgICBHgjBCQQIECBAgAABAgQIECBA4C+co8mRzOcVPQAAAABJRU5ErkJggg==
If you copy the above base64 code and paste it in the browser address bar it will render just fine, but if you do the same in word it won't work, so you need to decode the image first before showing it on mouse down
for more information:
Base64 encoding / decoding with javascript
Base64 encoding and decoding in client-side Javascript
Edit:
You can right click on the canvas and then save image as, thus it will be saved as an image file
I was wondering, is there a way of getting text to go over an image, but have it so that the text can be changed without going into the html, aka using a textbox from a form displayed on the webpage, and the inputted text being put on the image? i know it can be done but im struggling on where to start, and any reply pointing me in the right direction would be most gratefully recieved.
Gareth
If browser compatibility is not an issue, this can be done with HTML5 like so:
<div contenteditable="true">
This text can be edited by the user.
</div>
Then you could either set the image as the background image for that div, or place the image within that div but set the z-index lower than that of the text.