My problem:
I'm making an HTML5 game and am attempting to make it faster by drawing the background once instead of having it redrawn every frame.
To do this I drew the background on the canvas and then attempted to get an ImageData from it. Unfortunately I was stopped by a Security Error. Unable to, because the image is from an external source.
I've researched this and it seems that this is a "feature" to stop bad people from stealing content from the user's hard drive. Though these images I loaded aren't from the hard drive.
I would really love to be able to speed up my game. Is there a solution to go around the security error or maybe even to load the image directly into an image data so I can draw by looping through pixels?
(Note: I do not want to have to mess with multiple canvases to get the job done)
Thanks, Gan
Add a comment
|
1 Answer
There is no way around that, though you can draw an image from another domain the use of getImageData will always raise a security error in that situation. That is to prevent stealing of sensitive information since web sites can generate dynamic images containing private user information based on cookies or IP address. However, you could simply use a server side script to proxy the image.
But honestly getImageData and putImageData are fairly slow, I don't see how that could speed up your game. It seems to me that you think drawing an image data is faster than simply using drawImage, it's not.
You will have to redraw everything if you want your animation to look good anyway, that's the way animation works.
6 Comments
Gan
I see. Hm. I was just thinking that drawing 704 individual 44x44 images would be slower than drawing a single 968x748 image data.I don't know. Can you think of any other way of increasing efficiency?
Delta
Oh in that case I'd suggest you to do the server side script to proxy the image but instead of using getImageData it would be better if you just use canvas.toDataURL to create an Image object and draw it normaly with drawImage.
Gan
Would there be a way to convert an image data into an image?
Delta
No need to use image data, you can draw your 704 images on the canvas once and then convert it all to only one image using the canvas.toDataURL() method as I said before, but this will also raise a security error for cross domain images, thus the need to proxy it (or copy it to your server)
Delta
Certainly, just use CSS to place the main canvas over the background canvas, using position absolute or relative. Remember that you need to clear the main canvas using a transparent color in order to the background canvas to show. (use clearRect method). But see, in this case it'd be preferable to just place a div with the background image set to reapeat instead of another canvas as the background, this way there are no cross domain errors :)
|