Canvas is just like any other element, see the below code that uses google map and prints the outer html of the canvas tag.
so you can get the element attributes like you would for any elements:
var EC = protractor.ExpectedConditions;
await browser.get('https://www.google.com/maps/search/microchip/@51.8959843,-8.5330895,12z?hl=en')
await browser.wait(EC.presenceOf(element(by.xpath("//canvas"))), 5000);
console.log( await element(by.xpath("//canvas")).getAttribute('outerHTML'));
await browser.sleep(5000)
Output:

Interact with canvas:
Canvas elements are dynamically created.
If you want to interact with the canvas, then you can use the browser.actions class in protractor:
My config.js
exports.config = {
specs: ['test.js'],
/*capabilities: {
'browserName': 'firefox' // or 'safari'
},
*/
onPrepare: function(){
browser.waitForAngularEnabled(false);
browser.driver.manage().window().maximize();
},
jasmineNodeOpts: {
showColors: true, // Use colors in the command line report.
defaultTimeoutInterval: 5000000,
},
SELENIUM_PROMISE_MANAGER: false,
}
My test
'use strict';
describe('Validate dfsfdsf 1 behaviour', function () {
it('test {Regression} {Sanity} {Sanity}', async function () {
var EC = protractor.ExpectedConditions;
await browser.get('https://www.google.com/maps/@52.6099788,-2.8433538,8z')
await browser.wait(EC.presenceOf(element(by.xpath("//canvas"))), 10000);
await $("#content-container").click()
await browser.sleep(5000)
console.log("writing somehting....");
let a = await element(by.xpath("//canvas"))
await browser.actions().
dragAndDrop(await $('#widget-expand-button-pegman-icon'), { x: 1134, y: 503 }).
click().perform();
await browser.actions().
mouseMove(a, { x: 500, y: 0 }).
click().perform();
await browser.actions().
doubleClick().
perform();
await browser.sleep(15000)
});
});
The above code will open google map, and add the 'little man' icon into the map and zoom into the map
To know more about available methods in actions class
As you know, protractor is a wrapper around selenium so whatever selenium-js supports, protractor supports
so goto:
https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/
and search for actions, and choose legacyactionssequence
https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/actions_exports_LegacyActionSequence.html
this will have full list of supported methods