Добавить новый метод контекста canvas

Question

Я использую следующий код, чтобы убедиться, что метод canvas доступен для использования в resetTrasform.

if (!CanvasRenderingContext2D.prototype.resetTransform) { 
    CanvasRenderingContext2D.prototype.resetTransform = function() { 
     CanvasRenderingContext2D.prototype.setTransform(1, 0, 0, 1, 0, 0); 
    }; 
} 

Раньше я имел обыкновение использовать

var canvas  = document.getElementById("canvas"); 
var context  = canvas.getContext("2d"); 

if (!context.resetTransform) { 
    context.resetTransform = function() { 
     context.setTransform(1, 0, 0, 1, 0, 0); 
    }; 
} 

, но это зависит от переменной context. Если бы я назвал это по-другому, следующий код не работал бы, или мне пришлось бы изменить оператор if.

В любом случае, используя прототип подхода, я хочу определить другой метод. Я пробовал следующее:

CanvasRenderingContext2D.prototype.newBlankFrame = function() { 
    CanvasRenderingContext2D.prototype.resetTransform(); 
    CanvasRenderingContext2D.clearRect(0, 0, canvas.width, canvas.height); 
}; 

но это не работает. Он бросает эту ошибку

Uncaught TypeError: Illegal invocation 

на CanvasRenderingContext2D.prototype.resetTransform();

Кроме того, если удалить CanvasRenderingContext2D.prototype.resetTransform(); и просто использовать CanvasRenderingContext2D.clearRect(0, 0, canvas.width, canvas.height);, он по-прежнему бросает ошибку: Uncaught TypeError: CanvasRenderingContext2D.clearRect is not a function.

Я просто хочу иметь метод, который удалит любое преобразование и очистит холст. Я мог бы сделать это так:

var canvas  = document.getElementById("canvas"); 
var context  = canvas.getContext("2d"); 

context.newBlankFrame = function() { 
    context.resetTransform(); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
}; 

но это, как я уже говорил, зависит от имени переменной. Есть ли способ сделать эту работу прототипом? Я хочу, чтобы этот метод был доступен для любого контекста canvas.

Answer 1

В обоих методах отсутствует контекст, в котором они должны быть вызваны. Это можно исправить, используя ключевое слово this, которое ссылается на контекст холста, который вы пытаетесь манипулировать.

if (!CanvasRenderingContext2D.prototype.resetTransform) { 
    CanvasRenderingContext2D.prototype.resetTransform = function() { 
     this.setTransform(1, 0, 0, 1, 0, 0); 
    }; 
} 

CanvasRenderingContext2D.prototype.newBlankFrame = function() { 
    this.resetTransform(); 
    this.clearRect(0, 0, this.canvas.width, this.canvas.height); // canvas of the context 
}; 

Вот небольшая скрипка, показывающая, что теперь вы можете вызывать методы в любом контексте. http://jsfiddle.net/87ac5j8w/