2

I would like to draw a shape on the canvas (which I can do) but I'm not sure if it's possible to give that shape a variable name. I want to do this so I can then change the width of that shape later without having to redraw the shape.

Can somebody help? Thanks.

Harry
  • 1,120
  • 1
  • 12
  • 15
  • 1
    You could take a look at KineticJS for some advanced canvas manipulation. – nebulousGirl Jun 08 '12 at 00:17
  • 1
    You clearly do not understand how the HTML5 canvas works. Please read http://stackoverflow.com/a/5600671/405017 – Phrogz Jun 08 '12 at 04:23
  • Using an abstraction library like [Fabric.js](http://fabricjs.com) could help. – kangax Jun 08 '12 at 09:34
  • If you want to manipulate drawing objects [use SVG](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#svg-0) – robertc Jun 08 '12 at 10:05

1 Answers1

4

You cannot do that unfortunately without redrawing the shape. What you could do is store the information in an object like so.

var rectangle = {x:10,y:20,width:20,height:40};

Then you can change any of the values and redraw it like so,

//clear the canvas then draw
rectangle.width = 60;
ctx.fillRect(rectangle.x,rectangle.y,rectangle.width,rectangle.height);

Live Demo

Loktar
  • 34,764
  • 7
  • 90
  • 104