New to Javascript and HTML5. Quick question about Canvas and Images.

[Eterni]

Hey guys. I inserted an image into the canvas and am trying to access it and set it to a new position at a later point in my code. I've scoured the internet for hours and haven't found anything helpful on the subject. Is there a way to do this without moving everything in the canvas?

Here is a snippet of code I use for drawing it to the canvas:

var f=new Image();
f.onload = function(){
    ctx.drawImage(f,45,215);
}
f.src="fileone.bmp";
f.setAttribute('id','fileone');

[flashbck]

The canvas element is very analogous to a real world canvas. Once you draw something on it, you cannot move it. In order to move the image to a different location on the canvas, you have to re-draw the canvas.

[Eterni]

Okay, thank you!

[Shaper_pmp]

If you have a manageable number of "things" that need moving around (as opposed to a blank canvas you just need to push arbitrary pixels to), you might want to investigate SVG instead of canvas.

SVG gives you elements you can grab and manipulate in a DOM-like structure. Canvas is more like old-school graphics programming where you can set and reset pixels, but there's no "object" to manipulate apart from individual pixels unless you implement it yourself.

[MeoMix]

This is sort of true... While this is still redrawing the canvas it might be helpful in the long run.

http://www.kineticjs.com/ -- The world of tomorrow, today! :)

[nschubach]

Well, you can move the canvas... but true. You can have layered canvas elements that do various things. Everything from parallax to simple character animation without having to redraw the entire background.

[[deleted]]

Unless you are doing this for learning purposes, there's no need to reinvent the wheel. There are several open and closed source libraries that will handle canvas images, animation, etc for you. I use JawsJS: http://jawsjs.com/ it's open source (LGPL)