JSFiddle - React, Tailwind, and code Playground

by Matt Karl

HTML

<script src="https://pixijs.download/dev/pixi.min.js"></script>

JavaScript

const color = new PIXI.filters.ColorMatrixFilter();
const tint = 0xe73b37;
const r = tint >> 16 & 0xFF;
const g = tint >> 8 & 0xFF;
const b = tint & 0xFF;
color.matrix[0] = r / 255;
color.matrix[6] = g / 255;
color.matrix[12] = b / 255;

console.log('rgb(%d, %d, %d)', r, g, b);

const app = new PIXI.Application({
	width: 500,
  height: 240,
});
document.body.appendChild(app.view);

const sprite = PIXI.Sprite.fromImage('https://dl.dropbox.com/s/0cjaqh089r30fyp/IMG_0104.JPG?dl=0');

sprite.width = app.screen.width;
sprite.height = app.screen.height;

const rect = new PIXI.Graphics()
	.beginFill(tint)
  .drawRect(0, 0, 50, 50);

sprite.filters = [color];
app.stage.addChild(sprite, rect);