How to copy canvas element from a page with all its properties?

I found a canvas generator website. I would like to copy the canvas to my local environment for experimental purposes.

Is there a way to inspect it in chrome and export its drawn content only?

copy from PNG image coming as blank

I’m trying to copy a PNG photo to another place but it is coming as black.

Same code is working when site is changing at 11 am IST for 20 minutes daily.

What could be the problem:

"use strict";


$("body").append(
        ''
        );

$("#cimage").load(function ()
    {
         ff_img_copy(document.getElementById('cimage'), document.getElementById('anu-img-photo1'));


    }).each(function ()
    {
        if (this.complete)
            $(this).load();
    });


function ff_img_copy(src, destination)
    {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.fillStyle = '#fff'; /// set white fill style
        canvas.width = src.width;
        canvas.height = src.height;

       // alert('w,h=' + src.width + '+' + src.height);

        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(src, 0, 0);

        var dataURL = canvas.toDataURL('image/png');
        destination.src = dataURL;
    }

Unable to copy image using Canvas

I want to create autofill for a website. One captcha image, I want to zoom and also show as popup in case user forgets to fill it. For that I want to copy the image in another place.
If you check this site then please check only during these timings as site code is changing and this working:

  • 2:15 AM GMT – 04:20 AM GMT
  • 4:45 AM GMT – 05:20 AM GMT
  • 05:45 AM GMT – 06:30 AM GMT

But this code isn’t working it is copying into a black blank image:

function ff_create_box_captcha()
    {
        $("#anu-dialog-cap,#anu-img-captcha1").remove();

        $("body").append(
                '
' + '' + '
' ); } ff_create_box_captcha(); $("#cimage").load(function () { alert('I loaded!'); ff_img_copy(document.getElementById('cimage'), document.getElementById('anu-img-captcha1')); }).each(function () { if (this.complete) $(this).load(); }); function ff_img_copy(src, destination) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); context.fillStyle = '#fff'; /// set white fill style canvas.width = src.width; canvas.height = src.height; alert('w,h=' + src.width + '+' + src.height); context.fillRect(0, 0, canvas.width, canvas.height); context.drawImage(src, 0, 0); var dataURL = canvas.toDataURL(); destination.src = dataURL; }

Draw downloaded icon chrome extension

I use this example for setting extension icon from url.

                                var img = new Image,
                                canvas = document.createElement("canvas"),
                                ctx = canvas.getContext("2d"),
                                src = settings['address'] + "/2.png"; // insert image url here

                                img.crossOrigin = "Anonymous";

                                img.onload = function() {
                                    canvas.width = img.width;
                                    canvas.height = img.height;
                                    ctx.drawImage( img, 0, 0 );
                                    chrome.browserAction.setIcon({"imageData" : ctx.getImageData(0,0,19,19)});

                                };

                                img.src = 'https://lh3.googleusercontent.com/krl72AYWGWgmhSCcdlHm-IgwkOBfdq6qVFIJtHxhfoSlMcrIgKdVhK-l-o800kv0m7uO=w300';

But in the end I get a stupidly transparent icon, not even an icon but a void. There is no mistake.

Chrome extension: get clicked pixel color

I am building chrome extension. I have to create color eye drop picker. I made next coding in order to get clicked pixel color:

my canvas element appended to body like:

$('').css({
            position: "fixed",
            top: "0",
            left: "0",
            width: "100%",
            height: "100%",
            "z-index": 9001,
            'background-color': 'grey',
            'opacity': '0.5'
        }).attr('id', 'canvas').appendTo('body');

The listener on the canvas is looks like:

$(document).off('click.canvas').on('click.canvas', '#canvas', function(ev) {

            chrome.runtime.sendMessage({ action: 'get_pixel_color', event_data_X_coordinate: ev.pageX,  event_data_Y_coordinate: ev.pageY}, function(response) {                
            });
        });

The background js code is:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    switch (request.action) {            
        case 'get_pixel_color':
            chrome.tabs.captureVisibleTab(function(dataUrl) {
                var image = new Image();
                image.onload = function() {
                    var tmp = document.createElement('canvas');                   
                    var tempContext = tmp.getContext('2d');
                    tempContext.drawImage(image, 0,0,image.naturalWidth, image.naturalHeight);
                    var data = tempContext.getImageData(request.event_data_X_coordinate, request.event_data_Y_coordinate, 1, 1).data;
                };
                image.src = dataUrl;

            });
            break;
    }

});

My problem that I alwaus get all o in data, however, if I change the x and y manually sometimes I get data info

What is wring with this code