samanthamjohn/index.html

## index.html
<html>
    <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
            <script src="index.js"></script>
    </head>
    <body>

    </body>
</html>

## index.js

window.addEventListener("load", function(event) {
    main()
});

var main = function main() {
    var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
    document.body.appendChild(app.view);

    var texture;

    function addCanvas() {
        app.stage.removeChildren()
        var canvas = buildCanvas();
        if (texture) texture.destroy();
        texture = PIXI.Texture.fromCanvas(canvas);
        var sprite = PIXI.Sprite.from(texture);
        app.stage.addChild(sprite);
    }

    app.ticker.add(function(delta) {
        addCanvas();
    });


    var color = 0;
    function buildCanvas() {
        var canvas = document.createElement("canvas");
        var size = 100;
        canvas.width = size;
        canvas.height = size;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "hsl("+color+",98%,87%)";
        /// Change the color so you can see something happen
        color += 1;
        ctx.fillRect(0, 0, size, size);
        return canvas
    }
};
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
	<script src="index.js"></script>
	</head>
	<body>

	</body>
	</html>

	window.addEventListener("load", function(event) {
	main()
	});

	var main = function main() {
	var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
	document.body.appendChild(app.view);

	var texture;

	function addCanvas() {
	app.stage.removeChildren()
	var canvas = buildCanvas();
	if (texture) texture.destroy();
	texture = PIXI.Texture.fromCanvas(canvas);
	var sprite = PIXI.Sprite.from(texture);
	app.stage.addChild(sprite);
	}

	app.ticker.add(function(delta) {
	addCanvas();
	});


	var color = 0;
	function buildCanvas() {
	var canvas = document.createElement("canvas");
	var size = 100;
	canvas.width = size;
	canvas.height = size;
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "hsl("+color+",98%,87%)";
	/// Change the color so you can see something happen
	color += 1;
	ctx.fillRect(0, 0, size, size);
	return canvas
	}
	};