monogatari.action ('Canvas').objects ({
layers: ['sky', 'stars'],
for (let i = 0; i < 9; i++) {
ctx.lineTo((r / 0.525731) * 0.200811, 0);
const height = sky.height;
const ctx = sky.getContext('2d');
ctx.fillRect(0, 0, width, height);
ctx.translate(width / 2, height / 2);
// Create a circular clipping path
ctx.arc(0, 0, width * 0.4, 0, Math.PI * 2, true);
const lingrad = ctx.createLinearGradient(0, -1 * width / 2, 0, height / 2);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
ctx.fillRect(-width/2, -height/2, width, height);
drawStars: (stars, drawStar) => {
const width = stars.width;
const height = stars.height;
const ctx = stars.getContext('2d');
for (var j = 1; j < 50; j++) {
ctx.translate(width - Math.floor(Math.random() * width), height - Math.floor(Math.random() * height));
drawStar(ctx, Math.floor(Math.random() * 4) + 2);
start: function ({ sky, stars }, props, state, container) {
if (container.props.mode === 'background') {
props.drawStars (stars, props.drawStar);
return Promise.resolve ();
stop: ({ sky, stars }, props, state, container) => {
sky.getContext('2d').clearRect (0, 0, sky.width, sky.height);
stars.getContext('2d').clearRect (0, 0, stars.width, stars.height);
resize: function ({ sky, stars }, props, state, container) {
if (container.props.mode === 'background') {
const width = this.width ();
const height = this.height ();
sky.getContext('2d').clearRect (0, 0, sky.width, sky.height);
stars.getContext('2d').clearRect (0, 0, stars.width, stars.height);
props.drawStars (stars, props.drawStar);