How to use the canvas/Canvas.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 / canvasgraphics / 09-rect2.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 center
        Rectangle(this.ctx, 100, 100, 128, 128, DegToRad(20), true);

        Stroke(this.ctx, 255, 0, 255);
github photonstorm / lazer-dev / src / sat / D-poly-to-circle-correction.js View on Github external
let offset = new Vec2(206, 206);
        let correctionData = new CorrectionData();
        let canvas;
        let radius = 60;
        let ctx;

        let poly0 = [
            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)
        ];

        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);

            // *** This is what really matters. ***
            if (PolygonToCircleCorrection(poly0, offset, radius, correctionData)) {
                ctx.fillStyle = '#ff0000';
                ctx.strokeStyle = '#ff0000';
github photonstorm / lazer-dev / src / canvasgraphics / 01-line.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');

// export default function Line (context, width = 1, cap = 'butt', join = 'bevel', segments = null, offset = 0, miter = 10) {

        Line(this.ctx, 4);

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

        this.ctx.save();

        //  Calling Rectangle will transform the context and NOT reset it, as it's a pure Shape function.
github photonstorm / lazer-dev / src / filter / filter05-meanRemoval.js View on Github external
constructor () {

        this.canvas = Canvas(512, 256);

        AddToDOM(this.canvas, 'game');

        this.loader = new Loader();

        this.loader.path = 'assets/';

        this.loader.image('jelly').then((file) => this.loadComplete(file));

        this.loader.start();

    }
github photonstorm / lazer-dev / src / canvas / canvas16-threshold.js View on Github external
constructor () {

        this.canvas = Canvas(320, 200);

        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 / canvas / canvas06-getPixel.js View on Github external
constructor () {

        this.canvas = Canvas(320, 200);

        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 / 05-ants2.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 / physics / C-collision-dynamic-vs-static-solving.js View on Github external
constructor() {
        let mouse = new Vec2(0, 0);
        let canvas = null;
        let ctx = null;
        let bodyA = null;
        let bodyB = null;
        let bodyC = null;
        let bodyE = null;
        let bodies = [];
        let jump = false;
        let directionX = 0;
        let directionY = 0;
        let updatePhysics = true;
        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            mouse.x = evt.clientX - evt.target.offsetLeft;
            mouse.y = evt.clientY - evt.target.offsetTop;
        });
        ctx.fillStyle = '#fff';

        bodyA = new Body(256, 400, new PolygonCollider(
            [
                [-108, -50],
                [-108, 0],
                [-108 + 217, 0],
                [109, -100],
                [-50, -100]
github photonstorm / lazer-dev / src / filter / filter11-edgeDetectDark.js View on Github external
constructor () {

        this.canvas = Canvas(512, 256);

        AddToDOM(this.canvas, 'game');

        this.loader = new Loader();

        this.loader.path = 'assets/';

        this.loader.image('jelly').then((file) => this.loadComplete(file));

        this.loader.start();

    }
github photonstorm / lazer-dev / src / canvasgraphics / 10-rectRotate.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.angle = 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();