How to use the canvas/GetContext.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 / canvas / canvas19-getBounds.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        const bounds = GetBounds(imageData);

        console.log(bounds);

        ctx.strokeStyle = '#ff00ff';
        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);

    }
github photonstorm / lazer-dev / src / canvas / canvas17-getXY.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        console.log(imageData.width, 'x', imageData.height);

        console.log('Index 0', GetXY(imageData, 0)); // 0x0
        console.log('Index 4', GetXY(imageData, 4)); // 1x0
        console.log('Index 40', GetXY(imageData, 40)); // 10x0
        console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
        console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
        console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
        console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
        console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
        console.log('Index 255996', GetXY(imageData, 255996)); // 319x199
github photonstorm / lazer-dev / src / canvas / canvas21-drawImage1.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        Fill(ctx, 120, 0, 120);

        //  Draw the image at 0x0 with no arguments at all
        DrawImage(ctx, file.data);

    }
github photonstorm / lazer-dev / src / canvas / canvas09-setPixels.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        //  Get the ImageData
        const imageData = GetImageData(ctx);

        //  Expects the ImageData to contain the full canvas (maybe optimise?)
        SetPixels.load(ctx, imageData);

        //  Draw 3 diagonal lines
        for (let x = 0; x < 64; x++)
        {
            SetPixels.set(x, x, 255);
            SetPixels.set(x + 1, x, 0, 255);
            SetPixels.set(x + 2, x, 0, 0, 255);
        }
github photonstorm / lazer-dev / src / filter / filter02-flipVertical.js View on Github external
loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        FlipVertical(imageData);

        ctx.clearRect(0, 0, 320, 200);

        PutImageData(ctx, imageData);

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

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        // Threshold(100, ctx);
        Threshold(100, ctx, 0, 0, 160, 200);
        // Threshold(100, ctx, 60, 0, 160, 200);
        // Threshold(100, ctx, 160, 0, 160, 200);
        // Threshold(100, ctx, 200, 100, 160, 200);

    }
github photonstorm / lazer-dev / src / canvas / canvas21-drawImage7.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        Smoothing.disable(ctx);

        Fill(ctx, 120, 0, 120);

        DrawImage(ctx, file.data, { 
            x: 200, y: 200, 
            scaleX: 2, scaleY: 2
        });

        DrawImage(ctx, file.data, { 
            x: 350, y: 200, 
            scaleX: 2, scaleY: 2,
            blendMode: 'lighter'
        });
github photonstorm / lazer-dev / src / filter / filter11-edgeDetectDark.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx, 0, 0, 256, 256);

        EdgeDetectDark(imageData);

        PutImageData(ctx, imageData, 256, 0);

    }
github photonstorm / lazer-dev / src / canvas / canvas21-drawImage4.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        Smoothing.disable(ctx);

        Fill(ctx, 120, 0, 120);

        DrawImage(ctx, file.data, { 
            x: 400, y: 300, 
            anchorX: 0.5, anchorY: 0.5, 
            scaleX: 4, scaleY: 4, 
            rotate: DegToRad(45) 
        });

    }
github photonstorm / lazer-dev / src / filter / filter09-embossSubtle.js View on Github external
loadComplete (file) {

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx, 0, 0, 256, 256);

        EmbossSubtle(imageData);

        PutImageData(ctx, imageData, 256, 0);

    }