Print Content That Has Several Canvas

Question

Print Content That Has Several Canvas

Navigation

#1 by (1 votes)

1

I'm making a website where you have a painting to color a drawing.

After much research I was able to paint a certain area of the canvas drawing.

Now I want to do a function that prints the drawing I made.

I'm trying to do this:

<div id="painter">
<canvas style="z-index: 1;"></canvas>
<canvas style="z-index: 2;"></canvas>
<canvas style="z-index: 3;"></canvas>
<canvas style="z-index: 4;"></canvas>
</div>

My frame has all these canvas .

When I take a risk on the board it creates another canvas and so on.

I want to print the drawing, but that way it's not going to print. When you open the screen to print 5 empty sheets appear.

Does canvas not print?

javascript html canvas

asked by anonymous 28.10.2015 / 16:48

1 answer

Intermediate table of relationship n for n [closed] java.lang.NoSuchMethodError: org.hibernate.cfg.Environment.verifyProperties (Ljava / util / Map;) V

score 1 · Accepted Answer

I found the answer in SOen.

    $("#printImagem").on('click', function(e){
        e.preventDefault();

        var Can = new Array();
        $('canvas').each(function(index, el){
            Can[index] = $(el)[0].toDataURL('image/png');
        });

        var windowContent = '<!DOCTYPE html>';
        windowContent += '<head><title>Imprimir Desenho</title></head>';
        windowContent += '<body>';

        for(var x = 0; x <= Can.length - 1; x++)
            windowContent += '<img src = "' + Can[x] + '" style="position: absolute; left: 0; top: 0;">';

        windowContent += '</body>';
        windowContent += '</html>';
        var printWin = window.open('', '', width = 340, height = 260);
        printWin.document.open();
        printWin.document.write(windowContent);
        printWin.document.close();
        printWin.focus();
        printWin.print();
    });

The only thing that served me was toDataURL . I did not know I had to do this to make canvas an image. In fact it is converted to base64 and png , as defined in the parameter of function toDataURL('image/png') .

But it could be more than a% of% of the drawing area.

Then I made a canvas by searching each each and converting it to canvas and putting it in the same position with base64 , absolute and top with value left .

For this I used a 0 . I do not know if there are better ways to do it. If it exists, please post logic. I mean array and array .