Watermark in Canvas with PIXI

 export function createWatermarkFilter(): PIXI.Filter {

const fragment = ` varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float uAlpha; uniform vec3 uColor; uniform vec2 uResolution; // Draws a simplified letter shape at a given position float drawLetter(vec2 uv, vec2 pos, float scale, int letter) { uv = (uv - pos) / scale; if (letter == 0) { // D return step(0.1, uv.x) * step(uv.x, 0.3) * step(0.1, uv.y) * step(uv.y, 0.9) + step(0.3, uv.x) * step(uv.x, 0.4) * step(0.1, uv.y) * step(uv.y, 0.9) + step(0.1, uv.y) * step(uv.y, 0.2) * step(0.1, uv.x) * step(uv.x, 0.4) + step(0.8, uv.y) * step(uv.y, 0.9) * step(0.1, uv.x) * step(uv.x, 0.4); } else if (letter == 1) { // E return step(0.1, uv.x) * step(uv.x, 0.2) * step(0.1, uv.y) * step(uv.y, 0.9) + step(0.1, uv.y) * step(uv.y, 0.2) * step(0.1, uv.x) * step(uv.x, 0.5) + step(0.45, uv.y) * step(uv.y, 0.55) * step(0.1, uv.x) * step(uv.x, 0.5) + step(0.8, uv.y) * step(uv.y, 0.9) * step(0.1, uv.x) * step(uv.x, 0.5); } else if (letter == 2) { // M return step(0.1, uv.x) * step(uv.x, 0.2) * step(0.1, uv.y) * step(uv.y, 0.9) + step(0.4, uv.x) * step(uv.x, 0.5) * step(0.1, uv.y) * step(uv.y, 0.9) + step(0.2, uv.x) * step(0.4, uv.y) * step(uv.y, 0.5); } else if (letter == 3) { // O return step(0.1, uv.x) * step(uv.x, 0.4) * (step(0.1, uv.y) * step(uv.y, 0.2) + step(0.8, uv.y) * step(uv.y, 0.9)) + step(0.1, uv.y) * step(uv.y, 0.9) * (step(0.1, uv.x) * step(uv.x, 0.2) + step(0.3, uv.x) * step(uv.x, 0.4)); } return 0.0; } void main(void) { vec4 baseColor = texture2D(uSampler, vTextureCoord); // Normalized UV coordinates vec2 uv = vTextureCoord; // Rotate slightly for a diagonal watermark float angle = -0.5; float s = sin(angle); float c = cos(angle); uv = vec2(c * (uv.x - 0.5) - s * (uv.y - 0.5) + 0.5, s * (uv.x - 0.5) + c * (uv.y - 0.5) + 0.5); // Repeat pattern across the surface vec2 grid = fract(uv * 4.0); float demo = 0.0; // Draw the word "DEMO" demo += drawLetter(grid, vec2(0.05, 0.2), 0.3, 0); demo += drawLetter(grid, vec2(0.25, 0.2), 0.3, 1); demo += drawLetter(grid, vec2(0.45, 0.2), 0.3, 2); demo += drawLetter(grid, vec2(0.65, 0.2), 0.3, 3); demo = clamp(demo, 0.0, 1.0); // Blend watermark color with the base texture vec4 watermark = vec4(uColor, demo * uAlpha); gl_FragColor = mix(baseColor, watermark, watermark.a); } `; const uniforms = { uAlpha: 0.2, // Watermark transparency uColor: [1.0, 1.0, 1.0], // RGB color (white) uResolution: [800, 600], // Optional if you want dynamic scaling }; const filter = new PIXI.Filter(undefined, fragment, uniforms); (filter as any).isDemoFilter = true; // flag for easy removal later return filter; }

JSON with Angular

Hi, I have a simple JSON file with name "GameInfo.json", as below.
JSON

[
    {
        "GameName": "Game 1",
        "Client": "Self",
        "Lines": 5,
        "Feature": "",
        "LineType": "Lines",
        "GameImage": "game1.jpg"
    },
    {
        "GameName": "Game 2",
        "Client": "Self",
        "Lines": 5,
        "Feature": "No Feature",
        "LineType": "Lines",
        "GameImage": "no-preview.jpg"
    }
]

Now Load this file as below through json
JS

var app = angular.module('GameInformation', []);
app.controller('gameInfo', function($scope, $http)
{
$http.get("GameInfo.json").success(function(response){
$scope.gameDetails = response;
}).error(function(data, status, headers, config) {
                console.log('error loading json');
        });
});

Now to show this, follow the below step in html page

1. Create a table to show these details, then iterate the result for this.

        <div class="Title">GAME INFORMATION</div>
<div class="Heading">
<div class="Cell1">S No.</div>
<div class="Cell1">Game Name</div>
<div class="Cell1">Client</div>
<div class="Cell1">Lines</div>
<div class="Cell1">Feature</div>
<div class="Cell1">Line Type</div>
<div class="Cell1">Game Image</div>
</div>
<div id="rows{{$index}}" class="Row" ng-repeat="info in gameDetails">
<div class="CellCenter">{{$index+1}}</div>
<div class="Cell">{{info.GameName}}</div>
<div class="Cell2">{{info.Client}}</div>
<div class="Cell">{{info.Lines}}</div>
<div class="Cell">{{info.Feature}}</div>
<div class="Cell">{{info.Lines}}</div>
<div class="Cell">{{info.LineType}}</div>
<div class="Cell">{{info.GameImage}}</div>
</div>

Thats it :)

First Step in Angular

Hi,

Here are the steps to create a Angular App or Site

1. Download Angular or put updated link angular n your HTML, as below

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>

2. Now Place ng-app attribute into html or body or in div tag, as below

<body ng-app="GameInformation">

3. Now place ng-controller into div accordingly, as below

<div id="completeGames" ng-controller="gameInfo">

4. Now Create a JS file and write the below code based on mentioned ng-app and ng-controller name

var app = angular.module('GameInformation', []);
app.controller('gameInfo', function($scope, $http)
{
   console.log("App Initiated");
});