Я хотел бы извиниться за то, что перешел на вопрос.Я не исследовал проблему до того, как опубликовать эту тему.
Для тех, кто заинтересован в решении этой проблемы, прочитайте этот комментарий.
Я обнаружил, что итерация по HTMLCollection всех холстов, требуемый с помощью document.getElementsByTagName( "canvas" )
, можно назначить нужные функции для CanvasRenderingContext2D каждого отдельного холста.Я все еще не уверен, есть ли лучший способ сделать это, но здесь есть JSFiddle , а ниже вы найдете сырой JavaScript.
let xcd = {};
xcd.initialize = ( context ) => {
context.strokeRoundedRect = ( x, y, width, height, cornerRadius ) => {
console.log( "strokeRoundedRect:: ", "X: " + x, "Y: " + y, "Width: " + width, "Height: " + height, "Corner radius: " + cornerRadius );
}
context.fillRoundedRect = ( x, y, width, height, cornerRadius ) => {
console.log( "fillRoundedRect:: ", "X: " + x, "Y: " + y, "Width: " + width, "Height: " + height, "Corner radius: " + cornerRadius );
}
}
// Get HTMLCollection of all canvases
let canvases = document.getElementsByTagName( "canvas" );
for( let i = 0; i < canvases.length; i++)
xcd.initialize( canvases[ i ].getContext( "2d" ) );