Print error in canvas with filters

Question

I have a canvas element with some filter and I would like to print this canvas, but when I try, the print hasn't the filter effect.

HTML:

<div class="container">
    <canvas id="outCanvas" width="300" height="200" style="position: absolute;">
    </canvas>
    <canvas id="print" width="300" height="200" style="position: absolute; left: 300px;">
    </canvas>
</div>

JS:

// canvas for video frame
var outCanvas = document.getElementById('outCanvas');
var outCtx = outCanvas.getContext('2d');

var print = document.getElementById('print');
var printCtx = print.getContext('2d');

var image = new Image();
image.onload = function() {
    outCtx.drawImage(image, 0, 0, 300, 200);
    printCtx.drawImage(outCanvas, 0, 0, 300, 200);
}

image.src = 'http://www.beach-therapy.com/images/Arubabeach.jpg';

var filter = 'grayscale(100%) sepia(0%) contrast(130%) brightness(110%)';
$(outCanvas)
    .css('filter', filter)
    .css('-webkit-filter', filter);

Fiddle with the example

Anyone knows something about why this happen?

you need to convert the canvas item into a png or other image format and print that. You cannot directly print canvas content. See http://stackoverflow.com/questions/17009946/how-to-print-a-canvas-element for an example (there are many results for "js print canvas") — scrappedcola, Aug 10 '15 at 21:13
@scrappedcola, thanks for your answer. I tried now with converting the canvas and still the same. Another Fiddle: [link](http://jsfiddle.net/italoborges/fLxp78xt/). The code doesn't work in JSFiddle because security, you have to run in a local server. — Italo Borges, Aug 10 '15 at 21:52
also you should consider applying the filter directly from the canvas context check http://stackoverflow.com/a/31907255/3702797 — Kaiido, Aug 11 '15 at 01:11

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

That's because you have not added filter for print div. You have added the filter only for outCanvas div.

$(print)
    .css('filter', filter)
    .css('-webkit-filter', filter);

Now it works. Check the demo.

Hope it helps!

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 10 '15 at 21:13

bozzmob

12,364
16
50
73

Hey bozzmob, thanks for your answer, but you didn't understand. I need to print the image with effect to save this later for the user. Because of that, I can't apply the effect in a print div. – Italo Borges Aug 10 '15 at 21:22

Print error in canvas with filters

1 Answers1