CODEWITHSUNDEEP
javascripthtml5-canvastwo.js
Hydroper
Hydroper

Reputation: 433

How to add color filter in Two.js?

I'm trying to modulate the color a bitmap (i.e. applying a tint).

I've tried this and the color of my static bitmap has not been modulated:

const el = document.createElement("img");
el.src = "https://i.imgur.com/Dx200x9.png";
el.style["filter"] = "opacity(0.5) drop-shadow(0 0 green)";

two.makeSprite(two.makeTexture(el), 0, 0);

Playground: https://codesandbox.io/s/autumn-fire-249vfg?file=/src/index.js

The fill property does nothing either

Upvotes: -1

Views: 95

Answers (1)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48620

Looks like Two.js strips-off any classes and styles you may have applied to the target <img>. The input <img> is converted to an <image> under svg > defs > pattern.

You may have to load pre-filtered images. Use an application like GIMP (png) or Inkscape (svg) to modify your texture and save a modified version.

/* Class gets stripped when passing the <img> to makeTexture() */
.sprite-filter {
  filter: opacity(0.5) drop-shadow(0 0 green);
}

import Two from "two.js";

var appEl = document.getElementById("app");
var params = { width: 600, height: 600 };
var two = new Two(params).appendTo(appEl);

const img = new Image();

img.classList.add("sprite-filter"); // Won't work.

img.style.filter = "opacity(0.5) drop-shadow(0 0 green)"; // Also, won't work.

img.src = "https://i.imgur.com/Dx200x9.png";
img.addEventListener("load", function () {
  const texture = two.makeTexture(this);
  const sprite = two.makeSprite(
    texture,
    Math.floor(this.width / 2),
    Math.floor(this.height / 2)
  );
  two.update();
});

Upvotes: 1

Related Questions