CODEWITHSUNDEEP
htmlhtml5-canvaskineticjs
sd1sd1
sd1sd1

Reputation: 1048

kineticjs apply more then one filter

i'm building a canvas in html5 and following those tutorials:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-blur-filter-tutorial/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-brighten-or-darken-image-tutorial/

now, if i want to apply both filters on the image, is that possible? i want to let my user to change both blur and brightness of the picture, so i came up with that:

var Themex = new Kinetic.Image({
  x: 0,
  y: 0,
  name: "BG_image",
  image: imageBG,
  width: stage.getWidth(),
  height: stage.getHeight(),
  filter: {
    Kinetic.Filters.Brighten,
    Kinetic.Filters.Blur
  },
  filterBrightness: 0,
  filterRadius: 20
});

but i get a javascript error: "Uncaught SyntaxError: Unexpected identifier " on the filter: { row.

any idea?

Upvotes: 0

Views: 639

Answers (1)

sd1sd1
sd1sd1

Reputation: 1048

well if someone needs - actually there is no need to enter any filter. it's possible to attach any filter at a time - just like that, using the setFilter function

var slider = document.getElementById('slider');

slider.onchange = function() {
  Themex.setFilter(Kinetic.Filters.Brighten);
  Themex.setFilterBrightness(Math.round(slider.value));
  BGlayer.batchDraw();
};

var sliderBlur = document.getElementById('blurSlider');

sliderBlur.onchange = function() {
  Themex.setFilter(Kinetic.Filters.Blur);
  Themex.setFilterRadius(Math.round(sliderBlur.value));
  BGlayer.batchDraw();
};

var Grayscale_But = document.getElementById('Grayscale_But');

Grayscale_But.onclick = function() {
  Themex.setFilter(Kinetic.Filters.Grayscale);
  Themex.setFilterRadius(Math.round(20));
  BGlayer.batchDraw();
};

Upvotes: 1

Related Questions