LeakIX - Host facadejs.com

Open service 104.21.25.148:80 · facadejs.com

2026-01-08 23:56

HTTP/1.1 301 Moved Permanently
Date: Thu, 08 Jan 2026 23:56:29 GMT
Content-Length: 0
Connection: close
Location: https://facadejs.com/
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=XlCTDiD7KZOM%2BV8drqA0heDUKuxLlSRO%2Bs5I3VGfDihYgIRsKUBYlmUOMj7Udfm1nO4BepSRjnIAhVABGh97pO2wEhZbyT1Jh%2BiTXg%3D%3D"}]}
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
Server-Timing: cfEdge;dur=11,cfOrigin;dur=0
Server: cloudflare
CF-RAY: 9bafa1bb78b76d93-YYZ
alt-svc: h3=":443"; ma=86400

Found 2026-01-08 by HttpPlugin

Create report

Open service 2606:4700:3037::6815:1994:443 · facadejs.com

2025-12-31 08:44

HTTP/1.1 200 OK
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: cloudflare
last-modified: Thu, 01 Jan 2015 22:26:25 GMT
access-control-allow-origin: *
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
expires: Wed, 31 Dec 2025 08:54:13 GMT
Cache-Control: max-age=600
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=NGPUZcHZrGIHz2mGLfubV0oYLS0ZZ9oTxX%2F9jgHsKH5KhBqOQ%2Fzp657JrpSVM3DiucQdIWZvobJD3MCk2zkLg0wTWXOPxrrBRbrAulAyCsqZ9H9tTaQkBg%3D%3D"}]}
x-proxy-cache: MISS
x-github-request-id: 8B97:24EBD0:72F98C3:80BDDD3:6954E25D
Server-Timing: cfCacheStatus;desc="DYNAMIC"
Server-Timing: cfEdge;dur=35,cfOrigin;dur=5
via: 1.1 varnish
Age: 0
x-served-by: cache-yyz4580-YYZ
x-cache: HIT
x-cache-hits: 1
x-timer: S1767170654.859742,VS0,VE1
vary: Accept-Encoding
x-fastly-request-id: a2186c5c0c47b84764246abf77660d9ed2cc835a
cf-cache-status: DYNAMIC
CF-RAY: 9b687e6a59d139f3-YYZ
alt-svc: h3=":443"; ma=86400

Page title: Facade.js — Drawing shapes, images and text in HTML5 canvas made easy.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Facade.js &mdash; Drawing shapes, images and text in HTML5 canvas made easy.</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/highlight.js/8.0/styles/github.css">
</head>

<body>

<header>

<div class="wrapper">

    <h1><a href="https://facadejs.com/" class="logo">Facade.js</a></h1>

    <p class="subheader">Drawing shapes, images and text in HTML5 canvas made easy.</p>

    <p><a href="https://github.com/facadejs/Facade.js" class="button">Download on GitHub</a></p>

    <p class="version">0.3.0-beta</p>

    <p class="links">
        <a href="http://play.facadejs.com/">Demos</a> &mdash;
        <a href="http://plugins.facadejs.com/">Plugins</a> &mdash;
        <a href="http://docs.facadejs.com/">Documentation</a>
    </p>

</div>

</header>

<section>

<div class="wrapper">

    <h2>Getting Started</h2>

    <p>First include the Facade.js script (15kb minified, 3kb gzipped):</p>

    <pre><code>&lt;script src="facade.min.js"&gt;&lt;/script&gt;</code></pre>

    <p>Then create a new Facade.js object using an existing canvas element or a unique ID.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas'));</code></pre>

    <pre><code>var stage = new Facade('stage', 400, 300);</code></pre>

    <p>Then you can start creating and adding objects like rectangle, lines, circle, text and images.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.addToStage(rect);</code></pre>

    <p>To make an animation place all draw logic within an callback function using Facade.draw.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.draw(function () {

    this.clear();

    this.setOptions({ x: '+=1' });

    this.addToStage(rect);

});</code></pre>

</div>

</section>

<section>

<div class="wrapper">

    <h2>Basic Shapes</h2>

    <h3>Rectangle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/rect.js">http://play.facadejs.com/#basic/rect.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#rect_demo')),
        rect = new Facade.Rect({
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 200,
            height: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            fillStyle: '#1C73A8',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(rect);

    });

}());</code></pre>

    <canvas id="rect_demo" width="900" height="400"></canvas>

    <h3>Line</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/line.js">http://play.facadejs.com/#basic/line.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#line_demo')),
        line = new Facade.Line({
            x: stage.width() / 2,
            y: stage.height() / 2,
            x2: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(line);

    });

}());</code></pre>

    <canvas id="line_demo" width="900" height="400"></canvas>

    <h3>Circle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/circle.js">http://play.facadejs.com/#basic/circle.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#circle_demo')),
        circle = new Facade.Circle({
            x: stage.width() / 2,
            y: stage.height() / 2,
            radius: 10

Found 2025-12-31 by HttpPlugin

Create report

Open service 2606:4700:3037::6815:1994:80 · facadejs.com

2025-12-31 08:44

HTTP/1.1 301 Moved Permanently
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Length: 0
Connection: close
Location: https://facadejs.com/
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=GbJAzEzzJmRYoapD%2BkzmR8d0QoXb2OX9dXWwBDk0mwICTJvenvRb0icVe3mmD2w1sZ55IBrvxlFyrn%2FXToQwTLFs7W21lnDF%2BviipbBnCSzOS3I5z3%2Fv2A%3D%3D"}]}
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
Server-Timing: cfEdge;dur=8,cfOrigin;dur=0
Server: cloudflare
CF-RAY: 9b687e6a0fe019cf-YYZ
alt-svc: h3=":443"; ma=86400

Found 2025-12-31 by HttpPlugin

Create report

Open service 2606:4700:3037::ac43:8652:443 · facadejs.com

2025-12-31 08:44

HTTP/1.1 200 OK
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: cloudflare
last-modified: Thu, 01 Jan 2015 22:26:25 GMT
access-control-allow-origin: *
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
expires: Wed, 31 Dec 2025 08:54:13 GMT
Cache-Control: max-age=600
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=HQIUG0sX4IPf9%2FzTyVE12coZYIIMFirnHuI19L5RYLdDW02ST589nifbA900IpbKSk1lYZH4HzCIWCNxe%2BUYPAL1601qevmy3jeFDAiS2jAPKO1mv%2Bk%3D"}]}
x-proxy-cache: MISS
x-github-request-id: 8B97:24EBD0:72F98C3:80BDDD3:6954E25D
Server-Timing: cfCacheStatus;desc="DYNAMIC"
Server-Timing: cfEdge;dur=43,cfOrigin;dur=6
via: 1.1 varnish
Age: 0
x-served-by: cache-yyz4523-YYZ
x-cache: HIT
x-cache-hits: 1
x-timer: S1767170654.869751,VS0,VE1
vary: Accept-Encoding
x-fastly-request-id: fdced9db653ab358d6570a76325c11e37f125f20
cf-cache-status: DYNAMIC
CF-RAY: 9b687e6a5862a21d-YYZ
alt-svc: h3=":443"; ma=86400

Page title: Facade.js — Drawing shapes, images and text in HTML5 canvas made easy.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Facade.js &mdash; Drawing shapes, images and text in HTML5 canvas made easy.</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/highlight.js/8.0/styles/github.css">
</head>

<body>

<header>

<div class="wrapper">

    <h1><a href="https://facadejs.com/" class="logo">Facade.js</a></h1>

    <p class="subheader">Drawing shapes, images and text in HTML5 canvas made easy.</p>

    <p><a href="https://github.com/facadejs/Facade.js" class="button">Download on GitHub</a></p>

    <p class="version">0.3.0-beta</p>

    <p class="links">
        <a href="http://play.facadejs.com/">Demos</a> &mdash;
        <a href="http://plugins.facadejs.com/">Plugins</a> &mdash;
        <a href="http://docs.facadejs.com/">Documentation</a>
    </p>

</div>

</header>

<section>

<div class="wrapper">

    <h2>Getting Started</h2>

    <p>First include the Facade.js script (15kb minified, 3kb gzipped):</p>

    <pre><code>&lt;script src="facade.min.js"&gt;&lt;/script&gt;</code></pre>

    <p>Then create a new Facade.js object using an existing canvas element or a unique ID.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas'));</code></pre>

    <pre><code>var stage = new Facade('stage', 400, 300);</code></pre>

    <p>Then you can start creating and adding objects like rectangle, lines, circle, text and images.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.addToStage(rect);</code></pre>

    <p>To make an animation place all draw logic within an callback function using Facade.draw.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.draw(function () {

    this.clear();

    this.setOptions({ x: '+=1' });

    this.addToStage(rect);

});</code></pre>

</div>

</section>

<section>

<div class="wrapper">

    <h2>Basic Shapes</h2>

    <h3>Rectangle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/rect.js">http://play.facadejs.com/#basic/rect.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#rect_demo')),
        rect = new Facade.Rect({
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 200,
            height: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            fillStyle: '#1C73A8',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(rect);

    });

}());</code></pre>

    <canvas id="rect_demo" width="900" height="400"></canvas>

    <h3>Line</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/line.js">http://play.facadejs.com/#basic/line.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#line_demo')),
        line = new Facade.Line({
            x: stage.width() / 2,
            y: stage.height() / 2,
            x2: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(line);

    });

}());</code></pre>

    <canvas id="line_demo" width="900" height="400"></canvas>

    <h3>Circle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/circle.js">http://play.facadejs.com/#basic/circle.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#circle_demo')),
        circle = new Facade.Circle({
            x: stage.width() / 2,
            y: stage.height() / 2,
            radius: 10

Found 2025-12-31 by HttpPlugin

Create report

Open service 104.21.25.148:8443 · facadejs.com

2025-12-31 08:44

Found 2025-12-31 by HttpPlugin

Create report

Open service 172.67.134.82:8443 · facadejs.com

2025-12-31 08:44

Found 2025-12-31 by HttpPlugin

Create report

Open service 2606:4700:3037::6815:1994:8443 · facadejs.com

2025-12-31 08:44

Found 2025-12-31 by HttpPlugin

Create report

Open service 172.67.134.82:443 · facadejs.com

2025-12-31 08:44

HTTP/1.1 200 OK
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: cloudflare
last-modified: Thu, 01 Jan 2015 22:26:25 GMT
access-control-allow-origin: *
expires: Wed, 31 Dec 2025 08:54:13 GMT
Cache-Control: max-age=600
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=Htr9Iy4fxNl%2BRQVXGgam%2FFygtxzjDmRUe3JhEzBFTr%2FDKqbRArMIQS0Gde4sMSRi52TcBQcmjXlgW0qW7O0UNYoLyUf8C2YjQHccFA%3D%3D"}]}
x-proxy-cache: MISS
x-github-request-id: 4021:2368DD:99B096F:9BDD289:6954E25A
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
via: 1.1 varnish
Age: 0
x-served-by: cache-fra-eddf8230166-FRA
x-cache: HIT
x-cache-hits: 1
x-timer: S1767170654.843596,VS0,VE4
vary: Accept-Encoding
x-fastly-request-id: 7724d7d808b6eaa0c6ac7c749617b480c1f1a744
cf-cache-status: DYNAMIC
CF-RAY: 9b687e6a69dbae5f-FRA
alt-svc: h3=":443"; ma=86400

Page title: Facade.js — Drawing shapes, images and text in HTML5 canvas made easy.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Facade.js &mdash; Drawing shapes, images and text in HTML5 canvas made easy.</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/highlight.js/8.0/styles/github.css">
</head>

<body>

<header>

<div class="wrapper">

    <h1><a href="https://facadejs.com/" class="logo">Facade.js</a></h1>

    <p class="subheader">Drawing shapes, images and text in HTML5 canvas made easy.</p>

    <p><a href="https://github.com/facadejs/Facade.js" class="button">Download on GitHub</a></p>

    <p class="version">0.3.0-beta</p>

    <p class="links">
        <a href="http://play.facadejs.com/">Demos</a> &mdash;
        <a href="http://plugins.facadejs.com/">Plugins</a> &mdash;
        <a href="http://docs.facadejs.com/">Documentation</a>
    </p>

</div>

</header>

<section>

<div class="wrapper">

    <h2>Getting Started</h2>

    <p>First include the Facade.js script (15kb minified, 3kb gzipped):</p>

    <pre><code>&lt;script src="facade.min.js"&gt;&lt;/script&gt;</code></pre>

    <p>Then create a new Facade.js object using an existing canvas element or a unique ID.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas'));</code></pre>

    <pre><code>var stage = new Facade('stage', 400, 300);</code></pre>

    <p>Then you can start creating and adding objects like rectangle, lines, circle, text and images.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.addToStage(rect);</code></pre>

    <p>To make an animation place all draw logic within an callback function using Facade.draw.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.draw(function () {

    this.clear();

    this.setOptions({ x: '+=1' });

    this.addToStage(rect);

});</code></pre>

</div>

</section>

<section>

<div class="wrapper">

    <h2>Basic Shapes</h2>

    <h3>Rectangle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/rect.js">http://play.facadejs.com/#basic/rect.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#rect_demo')),
        rect = new Facade.Rect({
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 200,
            height: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            fillStyle: '#1C73A8',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(rect);

    });

}());</code></pre>

    <canvas id="rect_demo" width="900" height="400"></canvas>

    <h3>Line</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/line.js">http://play.facadejs.com/#basic/line.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#line_demo')),
        line = new Facade.Line({
            x: stage.width() / 2,
            y: stage.height() / 2,
            x2: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(line);

    });

}());</code></pre>

    <canvas id="line_demo" width="900" height="400"></canvas>

    <h3>Circle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/circle.js">http://play.facadejs.com/#basic/circle.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#circle_demo')),
        circle = new Facade.Circle({
            x: stage.width() / 2,
            y: stage.height() / 2,
            radius: 10

Found 2025-12-31 by HttpPlugin

Create report

Open service 172.67.134.82:80 · facadejs.com

2025-12-31 08:44

HTTP/1.1 301 Moved Permanently
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Length: 0
Connection: close
Location: https://facadejs.com/
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=rXPOtZfvY7kf84kV3RDHzFOzK3J6glF9Nw8Wg4sqshvsbrZlk%2FDkXMQbAILqzN3Bk1M8oxN8AUC0kgeGlGqPUKjtUUd9D7bSG2GuDg%3D%3D"}]}
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
Server: cloudflare
CF-RAY: 9b687e69af01b3b3-LHR
alt-svc: h3=":443"; ma=86400

Found 2025-12-31 by HttpPlugin

Create report

Open service 104.21.25.148:443 · facadejs.com

2025-12-31 08:44

HTTP/1.1 200 OK
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: close
Server: cloudflare
last-modified: Thu, 01 Jan 2015 22:26:25 GMT
access-control-allow-origin: *
expires: Wed, 31 Dec 2025 08:54:13 GMT
Cache-Control: max-age=600
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=uWF%2FYyCjP4w8F%2FBsX8wdb1jV2lzoJ2j1MvOoEK%2F9u3XJHFGkdemW6s1l4HR9bNgYOBSooT%2BLNKIRew7aRGux06YqWb1EqyFFd1Tghg%3D%3D"}]}
x-proxy-cache: MISS
x-github-request-id: 4021:2368DD:99B096F:9BDD289:6954E25A
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
via: 1.1 varnish
Age: 0
x-served-by: cache-fra-eddf8230024-FRA
x-cache: HIT
x-cache-hits: 1
x-timer: S1767170654.845920,VS0,VE1
vary: Accept-Encoding
x-fastly-request-id: 52ffbc47afed8992da624c5fadf158c77c506295
cf-cache-status: DYNAMIC
CF-RAY: 9b687e6a6e302beb-FRA
alt-svc: h3=":443"; ma=86400

Page title: Facade.js — Drawing shapes, images and text in HTML5 canvas made easy.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Facade.js &mdash; Drawing shapes, images and text in HTML5 canvas made easy.</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/highlight.js/8.0/styles/github.css">
</head>

<body>

<header>

<div class="wrapper">

    <h1><a href="https://facadejs.com/" class="logo">Facade.js</a></h1>

    <p class="subheader">Drawing shapes, images and text in HTML5 canvas made easy.</p>

    <p><a href="https://github.com/facadejs/Facade.js" class="button">Download on GitHub</a></p>

    <p class="version">0.3.0-beta</p>

    <p class="links">
        <a href="http://play.facadejs.com/">Demos</a> &mdash;
        <a href="http://plugins.facadejs.com/">Plugins</a> &mdash;
        <a href="http://docs.facadejs.com/">Documentation</a>
    </p>

</div>

</header>

<section>

<div class="wrapper">

    <h2>Getting Started</h2>

    <p>First include the Facade.js script (15kb minified, 3kb gzipped):</p>

    <pre><code>&lt;script src="facade.min.js"&gt;&lt;/script&gt;</code></pre>

    <p>Then create a new Facade.js object using an existing canvas element or a unique ID.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas'));</code></pre>

    <pre><code>var stage = new Facade('stage', 400, 300);</code></pre>

    <p>Then you can start creating and adding objects like rectangle, lines, circle, text and images.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.addToStage(rect);</code></pre>

    <p>To make an animation place all draw logic within an callback function using Facade.draw.</p>

    <pre><code>var stage = new Facade(document.querySelector('canvas')),
    rect = new Facade.Rect({ width: 100, height: 100, fillStyle: 'red' });

stage.draw(function () {

    this.clear();

    this.setOptions({ x: '+=1' });

    this.addToStage(rect);

});</code></pre>

</div>

</section>

<section>

<div class="wrapper">

    <h2>Basic Shapes</h2>

    <h3>Rectangle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/rect.js">http://play.facadejs.com/#basic/rect.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#rect_demo')),
        rect = new Facade.Rect({
            x: stage.width() / 2,
            y: stage.height() / 2,
            width: 200,
            height: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            fillStyle: '#1C73A8',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(rect);

    });

}());</code></pre>

    <canvas id="rect_demo" width="900" height="400"></canvas>

    <h3>Line</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/line.js">http://play.facadejs.com/#basic/line.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#line_demo')),
        line = new Facade.Line({
            x: stage.width() / 2,
            y: stage.height() / 2,
            x2: 200,
            lineWidth: 10,
            strokeStyle: '#333E4B',
            anchor: 'center'
        });

    stage.resizeForHDPI();

    stage.draw(function () {

        this.clear();

        this.addToStage(line);

    });

}());</code></pre>

    <canvas id="line_demo" width="900" height="400"></canvas>

    <h3>Circle</h3>

    <p>Play with this code live at <a href="http://play.facadejs.com/#basic/circle.js">http://play.facadejs.com/#basic/circle.js</a>.</p>

    <pre class="demo"><code>(function () {

    var stage = new Facade(document.querySelector('#circle_demo')),
        circle = new Facade.Circle({
            x: stage.width() / 2,
            y: stage.height() / 2,
            radius: 10

Found 2025-12-31 by HttpPlugin

Create report

Open service 104.21.25.148:80 · facadejs.com

2025-12-31 08:44

HTTP/1.1 301 Moved Permanently
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Length: 0
Connection: close
Location: https://facadejs.com/
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=%2FElk6RLcUjcrJlNoyH45uUQ2Ce9Zlsrmklt1wHKhkDPun2zZ456Wbuu303j%2BTpu8%2B0rxSogzR7qdhBO6hDy1yfI6dYqIWQDzUDTRqw%3D%3D"}]}
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
Server: cloudflare
CF-RAY: 9b687e699a9fdcc5-FRA
alt-svc: h3=":443"; ma=86400

Found 2025-12-31 by HttpPlugin

Create report

Open service 2606:4700:3037::ac43:8652:80 · facadejs.com

2025-12-31 08:44

HTTP/1.1 301 Moved Permanently
Date: Wed, 31 Dec 2025 08:44:13 GMT
Content-Length: 0
Connection: close
Location: https://facadejs.com/
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=BG%2BKqCz0bBSEAJ%2FfWEH1XGGAo%2F4bpnZlYsP37cXhYPzWuvZw41LD57soD12tDhoJEctSIXHqBa0UL%2BQvJUQEGVwRYBmngfxYCpydTx4SbuVjV9vzTgvT6g%3D%3D"}]}
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
Server-Timing: cfEdge;dur=8,cfOrigin;dur=0
Server: cloudflare
CF-RAY: 9b687e69694f0426-YYZ
alt-svc: h3=":443"; ma=86400

Found 2025-12-31 by HttpPlugin

Create report

Open service 2606:4700:3037::ac43:8652:8443 · facadejs.com

2025-12-31 08:44

Found 2025-12-31 by HttpPlugin

Create report

Open service 172.67.134.82:80 · facadejs.com

2025-12-23 06:08

HTTP/1.1 301 Moved Permanently
Date: Tue, 23 Dec 2025 06:08:32 GMT
Content-Length: 0
Connection: close
Location: https://facadejs.com/
Report-To: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=p6Hu6ZhMBIy4ioaBgXSDclD4Jph4haTyD50hGqNBa77jPK9HHgxKvU9E9yifQDHflQncrnuumt2rPI%2FofNYpqtjt4qayFNXAENgzRQ%3D%3D"}]}
Nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800}
Server: cloudflare
CF-RAY: 9b25af5cdfb85d78-FRA
alt-svc: h3=":443"; ma=86400

Found 2025-12-23 by HttpPlugin

Domain facadejs.com

Software information

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

Create report

facadejs.com*.facadejs.com

Domain summary

IP summary