Question

Take a look at this example:

  var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");

    // First rectangle created    
    ctx.fillRect(20,20,150,100);

    // Second rectangle created    
    ctx.fillRect(20,150,150,100);

    // Third rectangle created    
    ctx.fillRect(20,300,150,100);

I created three rectangles here. After creating third rectangle I want to rotate first rectangle. How do i get reference of first rectangle now?

Answer 1

A canvas is just a dumb grid of pixels. It doesn’t understand what shapes have been drawn on it. Your code (or a library that your code uses) must keep track of the shapes that you’ve drawn.

Instead, it sounds like you want a library to create a scene graph, like EaselJS, Paper.js, or KineticJS. These libraries will maintain a data structure that tracks what shapes have been drawn on the canvas, and they will then redraw them when you want to manipulate those shapes.