/* global AFRAME */ /** * Draw dynamic colorful rectangles. */ AFRAME.registerComponent('draw-canvas-rectangles', { schema: {canvas: {type: 'selector'}}, init: function () { var canvas = this.canvas = this.data.canvas; var ctx = this.ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.fillRect(0, 0, canvas.width, canvas.height); }, tick: function (t) { var canvas = this.canvas; var ctx = this.ctx; var x; var y; var hue = t / 10; // Bottom layer rectangle. ctx.fillStyle = 'hsl(' + hue + ', 50%, 80%)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Middle layer rectangle. hue = t / 15; ctx.fillStyle = 'hsl(' + hue + ', 50%, 60%)'; x = canvas.width / 10; y = canvas.height / 10; ctx.fillRect(x, y, canvas.width - x * 2, canvas.height - y * 2); // Top layer rectangle. hue = t / 20; ctx.fillStyle = 'hsl(' + hue + ', 50%, 40%)'; x = canvas.width / 5; y = canvas.height / 5; ctx.fillRect(x, y, canvas.width - x * 2, canvas.height - y * 2); } });