Question

I’m having my first experience in developing html5 applications. My issue is to make room plan. In the top of the page I have elements to drag to the bottom map area (they are copied). In the map area I can move elements, but not copy.

I’ve built drag’n’drop with help of image elements. But now I want to use canvas for updating numbers on images. I want to use canvas text functions for updating images.

The problem is when I copy canvas element from the top, html inserts well, but it is not drawn in some reasons.

Please, watch code here http://jsfiddle.net/InsideZ/MuGnv/2/. Code was written for Google Chrome.

Answer 1

EDIT:

I made a few small tweaks here: http://jsfiddle.net/MuGnv/5/

Note the changes made to the drawImg function:

function drawImg(src, targetClass) {

    $(targetClass).each(function() {
        var ctx = $(this).get(0).getContext('2d');
        var img = new Image();
        img.src = src;
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
        };

    });
}

Anytime a drop event is handled, the images are drawn again. This was the missing component as the image was only being drawn once.