How to use the canvas/BackgroundColor.js function in canvas

To help you get started, we’ve selected a few canvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github photonstorm / lazer-dev / src / time / time02-clock.js View on Github external
constructor () {

        this.canvas = Canvas(512, 256);

        BackgroundColor(this.canvas, 'rgb(0, 0, 50)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        this.ctx.font = '14px Courier';

        this.master = new MasterClock();

        this.clock1 = this.master.add(1000/60); // 60fps
        this.clock2 = this.master.add(1000/30); // 30fps
        this.clock3 = this.master.add(1000); // 1fps

        this.master.init(() => this.update());
github photonstorm / lazer-dev / src / fx / 04-starfield2d-image1.js View on Github external
constructor () {

        this.canvas = Canvas(800, 600);

        BackgroundColor(this.canvas, 'rgb(0, 0, 0)');

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        //  Loader
        this.image = null;
        this.loader = new Loader();
        this.loader.path = 'assets/';
        this.loader.image('star3').then((file) => this.loadComplete(file));
        this.loader.start();

    }
github photonstorm / lazer-dev / src / create / 02-renderToCanvas.js View on Github external
constructor () {

        //  Render the sprite data to an existing canvas and DON'T resize it

        this.canvas = Canvas(800, 300);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        let data = [
            ' 333 ',
            ' 777 ',
            'E333E',
            ' 333 ',
            ' 3 3 '
        ];

        RenderToCanvas(data, { canvas: this.canvas, palette: PALETTE_ARNE, resizeCanvas: false });

    }
github photonstorm / lazer-dev / src / sat / 00-poly-to-poly-overlap.js View on Github external
let offset = new Vec2(206, 206);
        let canvas;
        let ctx;

        let poly0 = [
            new Vec2(offset.x + 50, offset.y + 0),
            new Vec2(offset.x + 100, offset.y + 100),
            new Vec2(offset.x + 0, offset.y + 100),
        ];

        offset.set(0,0);;

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            offset.x = evt.clientX - evt.target.offsetLeft;
            offset.y = evt.clientY - evt.target.offsetTop;
        });

        function loop() {
            let poly1 = [
                new Vec2(offset.x + 0, offset.y + 0),
                new Vec2(offset.x + 100, offset.y + 0),
                new Vec2(offset.x + 100, offset.y + 150),
                new Vec2(offset.x + 0, offset.y + 100)
            ];
            ctx.fillStyle = '#00ff00';
            ctx.strokeStyle = '#00ff00';
            // *** This is what really matters. ***
github photonstorm / lazer-dev / src / canvasgraphics / 08-rect.js View on Github external
constructor () {

        this.canvas = Canvas(512, 512);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        Line(this.ctx, 2);

// export default function Rectangle (context, x, y, width = 128, height = 128, angle = 0, fromCenter = false) {

        //  Rotate from corner
        Rectangle(this.ctx, 100, 100, 128, 128, DegToRad(20));

        Stroke(this.ctx, 255, 0, 255);


    }
github photonstorm / lazer-dev / src / time / time01-step.js View on Github external
constructor () {

        this.canvas = Canvas(512, 256);

        BackgroundColor(this.canvas, 'rgb(0, 0, 50)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        this.ctx.font = '14px Courier';

        this.clock = new Clock();

        this.clock.init(() => this.update());

    }
github photonstorm / lazer-dev / src / color / color-fromHSV01.js View on Github external
import Color from 'graphics/color/BaseColor.js';

import Canvas from 'canvas/Canvas.js';
import AddToDOM from 'dom/AddToDOM.js';
import BackgroundColor from 'canvas/BackgroundColor.js';

let canvas = Canvas(512, 640);

BackgroundColor(canvas, 'rgb(0, 0, 0)');

AddToDOM(canvas, 'game');

let ctx = canvas.getContext('2d');

let color = new Color();

for (let y = 0; y < 360; y++)
{
    color.fromHSVColorWheel(y);
    ctx.fillStyle = color.rgba;
    ctx.fillRect(0, y*2, 512, 2);
}
github photonstorm / lazer-dev / src / canvas / canvas04-move.js View on Github external
constructor () {

        this.canvas = Canvas(320, 200);

        this.pic = null;

        BackgroundColor(this.canvas, 'rgb(200, 50, 50)');
        AddToDOM(this.canvas, 'game');

        this.loader = new Loader();

        this.loader.path = 'assets/';

        this.loader.image('agent-t-buggin-acf_logo').then((file) => this.loadComplete(file));

        this.loader.start();

    }
github photonstorm / lazer-dev / src / canvasgraphics / 04-ants.js View on Github external
constructor () {

        this.canvas = Canvas(512, 512);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.offset = 0;

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
github photonstorm / lazer-dev / src / sat / H-rectpoly-to-rectpoly-correction.js View on Github external
new Vec2(offset.x + 100, offset.y + 100),
            new Vec2(offset.x + 0, offset.y + 100)
        ];

        let poly1 = [
            new Vec2(0, 0),
            new Vec2(50, 0),
            new Vec2(50, 50),
            new Vec2(0, 50)
        ];

        offset.set(0, 0);;

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            offset.x = evt.clientX - evt.target.offsetLeft;
            offset.y = evt.clientY - evt.target.offsetTop;
        });

        function loop() {
            requestAnimationFrame(loop);
            ctx.clearRect(0, 0, 512, 512);
            let transformedPoly1 = new Array(4);

            for (let index = 0; index < 4; ++index) {
                transformedPoly1[index] = [
                    offset.x + poly1[index].x * cos(angle) - poly1[index].y * sin(angle),
                    offset.y + poly1[index].x * sin(angle) + poly1[index].y * cos(angle)
                ];