strokeRect - Canvas drawing with HTML 5

Hi I am playing around with shapes and canvas and I have a question:

So开发者_JAVA技巧 say I have this code that draws a nice rectangle on the canvas:

$("#create_rectangle").bind("click", function() {   
        if(canvas[0].getContext){
            var ctx = canvas[0].getContext('2d');
            ctx.strokeRect(50,50,50,50);
        }
    });

Now I say I want to store a reference to that rectangle so that I can make alteration to it at a later stage. The stokeRect() method does not seem to return any value. How do I reference that particular rectangle that was created?

Well you can't reference it, but you can include it in a draw function which depending your arguments allow you to move/rotate hide etc.

It very depend on what you want to do with this shape.

This tutorial can be helpfull to understand manipulation of shape. http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

You can't.

Canvas is basically just a canvas. You throw some paint at it, it dries and you're done. You can't take your paint and move it somewhere else—but you can paint over it.

What you may want is SVG. It keeps track of shapes and other assorted things so that you can change them, deal with interactions much more precisely, et cetera.