move, delete and retrieve added rectangles positions in a HTML5 canvas

Question

I have this code below to add a rectangle to a canvas, I have some questions regarding this.

• Is it possible to move the added rectangle after it has been created?
• Is it possible to delete a rectangle that has been added?

• Can I retrieve all added rectangles positions (x, y, width and height) after I have added a bunch of rectangles and lets say by click of a button?

  
  <script>
    function rect()
    {
    var canvas = document.getElementById('drawing'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false;
    function init() {
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
    }
    function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
    }
    function mouseUp() {
    drag = false;
    }
    function mouseMove(e) {
    if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY ;
    //ctx.clearRect(0,0,canvas.width,canvas.height);
    draw();
    }
    }
    function draw() {
    ctx.globalAlpha=0.5; // Half opacity
    ctx.fillStyle= "#b0c2f7";
    //ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
    }
    init();
    }
    </script>
  <div id="canvasDiv">
    <canvas id="drawing" width="580px" height="788px" style="border:2px solid #000; background: #FFF;"></canvas>
    </div>
    <script>
    var canvas = document.getElementById('drawing');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
   imageObj.onload = function() {
    context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = 'http://localhost/test/Images/DSC0273446.jpg';
    </script>
  <div id="rect"> 
    <p><button onclick="rect();">Rectangle</button></p>
    </div>
  

  Really appreciate all help I can get in this matter, thanks!

Answer 1

Is it possible to move the added rectangle after it has been created?

No, once drawn it is just pixels, there is no 'rectangle object' in the canvas. The usual approach to 'moving' a shape in canvas is to clearRect() (or the whole canvas) and then fillRect() in a slightly different position in a requestAnimationFrame controlled loop.

Is it possible to delete a rectangle that has been added?

As long as you've stored the location where you drew it, you can clearRect(). Note that this clears an area of pixels, not an object - the results of previous drawing operations will not automatically reappear.

Can I retrieve all added rectangles positions (x, y, width and height) after I have added a bunch of rectangles and lets say by click of a button?

No. The canvas does not store drawn objects, only pixel image data. If you want to keep track of the objects that have been drawn then you have to do that yourself. If you want to manipulate shapes instead of pixels then there are libraries like fabric.js which add an object manipulation layer on top of canvas, or you can use an svg element instead which will let you create graphics with normal DOM methods.