Background image reseting every time when I try to zoom, draw and all

[ghost]

I am using your API, its really very nice, I drawing one image on canvas using drawImage method but when I try to draw and zoom image is disappearing, please help me.. I am new to this

                 var canvas = document.getElementById("test-canvas"),
	     ctx = canvas.getContext("2d");

	     canvas.width = 512;
	     canvas.height = 512;


	     var background = new Image();
	     background.src = "img/yf6d9SX.jpg";

	     background.onload = function(){
	        ctx.drawImage(background,0,0);   
	     }  

above code im using first time to draw image on canvas Please help me quickly..

[lakenen]

If you want to manipulate the pixels of the image, you can use the fromImage or fromImageURL methods on the TeledrawCanvas object (sorry for the lack of documentation... see the source code).

If you'd just like to draw over the top of an image, you could try absolutely positioning the canvas over an img element on your page (with the background of the canvas element set to transparent).

Hope this helps! 😄

[ghost]

Hi thanks for you quick reply.. Thank you I have upload image successfully but when I try to erase drawn contents on the canvas IMAGE also erasing.. How can I resolve this? and writing smoothness is not there.. And also I can't write running letters on the canvas, I am using for touch devices, If I want to write some letters in running format(For example Signature), I can't make it.. Smoothness is coming as user expectation.

[lakenen]

Like I said in my previous comment, you don't need to draw the image into the canvas if you're not trying to manipulate the image pixels (i.e., you want to draw on TOP of it). In that case, just position an image behind the canvas element with absolute positioning, and set the canvas background-color: transparent with CSS.

I am not sure what you mean by writing smoothness. What are running letters?

[ghost]

I am placing one background image on top of canvas, on that I have to draw(On top of image) and I have zoom, pan, erase, and features which you have provided, As per your previous comment, I have changed the code like below `

`

after changing this code, background image is displaying and I can draw, erase, clear, BUT zoom in(+) and zoom out(-) and Pan is not working with this logic because background image is not a part of canvas. Only canvas is zooming and panning, how to resolve this ?

Second approach I tried is-- By using fromImageURL method I placed image as background of canvas, with this logic everything is working fine EXPECT eraser , on device ready I called this method c.fromImageURL(url)

My requirement is to place one background image for canvas and access all the features from your API.. Please help me to resolve this, I am struggling more to get work it done from past few days..

[lakenen]

I believe the feature you're requesting is not possible with the current API. It sounds like you're require some sort of layering system, which does not exist. You could fake it by creating two separate canvas objects of the same size stacked on top of each other, then try to sync the bottom canvas by listening to zoom and pan events from the top canvas.

I created a gist showing how to do this: https://gist.github.com/lakenen/61628faa0b88bae7c82fc6a190aa308a