Canvas listener don't work after using Pixastic plugin

Question

I have a strange conflict between Pixastic and my canvas listeners.

When I use a Pixastic function on my canvas the listeners of my canvas after this operation don't work. I analyzed my canvas using the Pixastic plugin and discovered that pixastic added some attributes like tabindex (that I think conflicted with the listener).

This is my canvas before and after:

//Before
<canvas id="mycanvas" width="727" height="600" style="border: 1px solid black; left: 36.5px; top: 21px;"></canvas>

//After
<canvas id="mycanvas" class="" width="600" height="727" style="border: 1px solid black; left: 36.5px; top: 21px;" title="" tabindex="-1"></canvas>

The listeners that i use are mousedown, mouseup, mousemove. Someone can help me?

In some cases Pixastic replaces a canvas to show its result. Are you sure it is still your canvas? I'd try out by adding a superfluous attribute like test="imhere" directly in the html code. — Torsten Becker, Nov 01 '12 at 12:40

score 0 · Answer 1 · answered May 14 '14 at 14:03

0

Pixastic.process(canvas, 'brightness',
{
    'brightness': 60,
    'contrast': 0.5,
    'leaveDOM': true
},
function(img) {
    ctx.drawImage(img, 0, 0);
}

);

Check the leaveDOM parameter, it might help.

answered May 14 '14 at 14:03

user3636733

1

score 0 · Answer 2 · answered Oct 12 '14 at 10:43

In my version of Pixastic (0.1.3) there is a parameter that allows you to set the destination canvas

Try this

var canvas = document.querySelector('#my_canvas');
// Since you specify what canvas the result should be rendered to,
// no replacing is occured
Pixastic.process(canvas, 'brightness',{'resultCanvas': canvas}); 

console.log(canvas === document.querySelector('#my_canvas')); // Should be true

Unfortunately I could not check for the latest version of Pixastic since the website is down at the moment of posting this.

Canvas listener don't work after using Pixastic plugin

2 Answers2