CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Haris Hajdarevic
Haris Hajdarevic

Reputation: 1575

Redraw images on canvas

I need to have a couple of images on one canvas. I have a trouble with a function clear(); which is used when I need to drag images on canvas.

The problem is that we are Canvas appears only on the last image. I try to use context.save() and context.restore() but it was not usefull in my case.

    switch(i)
    {
    case 0:
    challengerImg = new Image();
    challengerImg.onload = function(){
        drawImage(this,x,y,i);
    };
    challengerImg.src = "<?php echo $base_url; ?>/themes/bartik/images/sheep.png";
    break;

    case 1:
    tshirt = new Image();
    tshirt.onload = function(){
        drawImage(this,x,y,i);
    };
    tshirt.src = "<?php echo $base_url; ?>/themes/bartik/images/tshirt.png";
    break;
    }

And function which draw on canvas:

           function drawImage(challengerImg,x,y,i){
            console.log("Function drawImage start");
            var events = new Events("layer0");
            var canvas = events.getCanvas();
            var context = events.getContext();
            var rectX = x;
            var rectY = y;

            var draggingRect = false;
            var draggingRectOffsetX = 0;
            var draggingRectOffsetY = 0;

             events.setStage(function(){
                var mousePos = this.getMousePos();

                if (draggingRect) {
                    rectX = mousePos.x - draggingRectOffsetX;
                    rectY = mousePos.y - draggingRectOffsetY;
                }

                this.clear(); //Here is trouble
                this.beginRegion();

                context.drawImage(challengerImg, rectX, rectY, challengerImg.width, challengerImg.height);

                // draw rectangular region for image
                context.beginPath();
                context.rect(rectX, rectY, challengerImg.width, challengerImg.height);
                context.closePath();

                this.addRegionEventListener("mousedown", function(){
                    draggingRect = true;
                    var mousePos = events.getMousePos();
                    draggingRectOffsetX = mousePos.x - rectX;
                    draggingRectOffsetY = mousePos.y - rectY;

                });
                this.addRegionEventListener("mouseup", function(){
                    draggingRect = false;
                });
                this.addRegionEventListener("mouseover", function(){
                    document.body.style.cursor = "pointer";
                });
                this.addRegionEventListener("mouseout", function(){
                    document.body.style.cursor = "default";
                });

                this.closeRegion();
            });
        }

Upvotes: 0

Views: 2516

Answers (3)

Nita
Nita

Reputation: 149

The canvas is a flat object - once you draw an image onto it, the image has no more context as it renders as part of the canvas. You can either create an array of rectangle objects with their coordinates to keep track of what's already on the canvas or test the mouse position for the background color to determine whether there is an image or not. Then you can remove the item where the event happened by clearing the canvas and redrawing all the other items again.

Hope this helps!

Upvotes: 0

Jaibuu
Jaibuu

Reputation: 578

save(), restore() do not handle bitmap data at all :).

To drag stuff around, basically you need to have an offscreen canvas which doesn't contain the element you are drawing, and after each update draw the offscreen canvas plus the element being dragged.

It's probably simpler to use a library that already does it, most do, like http://www.html5canvastutorials.com/labs/html5-canvas-interactive-scatter-plot-with-20000-nodes-using-kineticjs/

Upvotes: 0

Gwennael Buchet
Gwennael Buchet

Reputation: 1307

context.save and context.restore only works for state of the context (transformation, globalAlpha,...), but not for what is rendered inside.

When you clear your context, it makes it empty.

What you have to do is to :

  • catch mouse events and change position variables
  • clear the canvas
  • redraw all images at their new position

Upvotes: 1

Related Questions