0

I am using HTML5 and javascript in a project. I am loading image from a Url(seleted by user) and then i am moving that image inside canvas. On moving i am redrawing the whole image. But on moving image is flickering. So i want to copy that file from URL to my working directory. So that flickering of image on moving would get stop.

Is there any other way to do this? if not then how can i copy that image file in my working follder(i.e. destination path).

Thanks a lot in advance.

Shanky
  • 201
  • 1
  • 4
  • 16
  • 3
    It sounds as if your problem if that you clear the canvas, then redraw which causes flickering. And you think that having a local copy of the file will help, which it probably wont. What you want is buffering, so that the new image i completely redrawn before you show it to the user. Try the advice in [this question](http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering). – Odalrick Jul 25 '12 at 10:44
  • Thanks for answer Odalrick. The link, which you suggest me, solves this problem with the help of TWO canvas, but i want to do it on a SINGLE canvas. – Shanky Jul 25 '12 at 11:22
  • 2
    @Shanky, you want "flickering to be gone", not "to do it on single canvas". End-user cares not how exactly do you do it and buffering is very old and proven technique anyway. – Oleg V. Volkov Jul 25 '12 at 11:32
  • Oleg V. Volkov is correct. Something you may want to look into is that you are not requesting the image each update also. You will want to get the image once and then use the same image. – Sphvn Jul 25 '12 at 11:35
  • @OlegV.Volkov thanks for reply, but actually i have a requirement to do it on canvas. because i am rendering pdf as html pas on canvas. If i use two canvas : ONE for image drawing and OTHER for shapes drawing that how can i select text of html page which is displaying in botton canvas. – Shanky Jul 25 '12 at 14:25

2 Answers2

1

This article will give you some good pointers to optimizing your canvas code. Make sure you take a good look at the section titled: Pre-render to an off-screen canvas.

Maurice
  • 27,582
  • 5
  • 49
  • 62
0

You probably are facing crossdomain limitations when using images in canvas. The image and the html document must reside on the same server/domain otherwise you have to base64 encode the image as the image source.

Alex
  • 3,732
  • 5
  • 37
  • 59